fix(select): don't select active item when tabbing away while closed (#18797)

When the user tabs away from a select, we pick out the active option automatically. The problem is that we weren't checking that the select is open so in some cases the user might be tabbing through and selecting something by accident.

Fixes #18784.

(cherry picked from commit 4e6083b)

Author: crisbeto

src/material/select/select.spec.ts

@@ -10,6 +10,7 @@ import {
   TAB,
   UP_ARROW,
   A,
+  ESCAPE,
 } from '@angular/cdk/keycodes';
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {Platform} from '@angular/cdk/platform';
@@ -3102,7 +3103,7 @@ describe('MatSelect', () => {
       expect(spy).toHaveBeenCalledWith('steak-0');
     }));
 
-    it('should set the value when options are clicked', fakeAsync(() => {
+    it('should select the active option when tabbing away while open', fakeAsync(() => {
       const fixture = TestBed.createComponent(BasicSelectWithoutForms);
       fixture.detectChanges();
       const select = fixture.nativeElement.querySelector('.mat-select');
@@ -3129,6 +3130,33 @@ describe('MatSelect', () => {
       expect(trigger.textContent).toContain('Sandwich');
     }));
 
+    it('should not select the active option when tabbing away while close', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicSelectWithoutForms);
+      fixture.detectChanges();
+      const select = fixture.nativeElement.querySelector('.mat-select');
+
+      expect(fixture.componentInstance.selectedFood).toBeFalsy();
+
+      const trigger = fixture.nativeElement.querySelector('.mat-select-trigger');
+
+      trigger.click();
+      fixture.detectChanges();
+      flush();
+
+      dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+      fixture.detectChanges();
+      dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+      fixture.detectChanges();
+      dispatchKeyboardEvent(select, 'keydown', ESCAPE);
+      fixture.detectChanges();
+
+      dispatchKeyboardEvent(select, 'keydown', TAB);
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.selectedFood).toBeFalsy();
+    }));
+
     it('should not change the multiple value selection when tabbing away', fakeAsync(() => {
       const fixture = TestBed.createComponent(BasicSelectWithoutFormsMultiple);
       fixture.detectChanges();

src/material/select/select.ts

@@ -936,16 +936,18 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       .withAllowedModifierKeys(['shiftKey']);
 
     this._keyManager.tabOut.pipe(takeUntil(this._destroy)).subscribe(() => {
-      // Select the active item when tabbing away. This is consistent with how the native
-      // select behaves. Note that we only want to do this in single selection mode.
-      if (!this.multiple && this._keyManager.activeItem) {
-        this._keyManager.activeItem._selectViaInteraction();
-      }
+      if (this.panelOpen) {
+        // Select the active item when tabbing away. This is consistent with how the native
+        // select behaves. Note that we only want to do this in single selection mode.
+        if (!this.multiple && this._keyManager.activeItem) {
+          this._keyManager.activeItem._selectViaInteraction();
+        }
 
-      // Restore focus to the trigger before closing. Ensures that the focus
-      // position won't be lost if the user got focus into the overlay.
-      this.focus();
-      this.close();
+        // Restore focus to the trigger before closing. Ensures that the focus
+        // position won't be lost if the user got focus into the overlay.
+        this.focus();
+        this.close();
+      }
     });
 
     this._keyManager.change.pipe(takeUntil(this._destroy)).subscribe(() => {