fix(select): select active item when tabbing away (#17592)

Currently `mat-select` closes the panel when the user tabs away, however the native select picks the currently-highlighted option. These changes add the same functionality to the `mat-select` in single selection mode.

Fixes #17442.

Author: crisbeto

src/material/select/select.spec.ts

@@ -3075,6 +3075,58 @@ describe('MatSelect', () => {
       expect(spy).toHaveBeenCalledWith('steak-0');
     }));
 
+    it('should set the value when options are clicked', 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', TAB);
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.selectedFood).toBe('sandwich-2');
+      expect(fixture.componentInstance.select.value).toBe('sandwich-2');
+      expect(trigger.textContent).toContain('Sandwich');
+    }));
+
+    it('should not change the multiple value selection when tabbing away', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicSelectWithoutFormsMultiple);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.selectedFoods).toBeFalsy('Expected no value on init.');
+
+      const select = fixture.nativeElement.querySelector('.mat-select');
+      const trigger = fixture.nativeElement.querySelector('.mat-select-trigger');
+      trigger.click();
+      fixture.detectChanges();
+
+      dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+      fixture.detectChanges();
+      dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+      fixture.detectChanges();
+
+      dispatchKeyboardEvent(select, 'keydown', TAB);
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.selectedFoods)
+          .toBeFalsy('Expected no value after tabbing away.');
+    }));
+
+
   });
 
   describe('with option centering disabled', () => {

src/material/select/select.ts

@@ -899,6 +899,12 @@ 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();
+      }
+
       // 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();