fix(select): don't restore focus unless an option was selected

Currently `mat-select` always restores focus to its trigger whenever the panel is closed. This can be problematic, because the user might've scrolled away and restoring focus would scroll the page back up. These changes switch to only restoring focus if the user made a selection.

Fixes #8915.

Author: crisbeto

src/lib/select/select.spec.ts

@@ -2421,6 +2421,25 @@ describe('MatSelect', () => {
       expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
     }));
 
+    it('should not restore focus to the host element when clicking outside', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicSelectWithoutForms);
+      const select = fixture.debugElement.nativeElement.querySelector('mat-select');
+
+      fixture.detectChanges();
+      fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
+      fixture.detectChanges();
+      flush();
+
+      expect(document.activeElement).toBe(select, 'Expected trigger to be focused.');
+
+      select.blur(); // Blur manually since the programmatic click might not do it.
+      (overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement).click();
+      fixture.detectChanges();
+      flush();
+
+      expect(document.activeElement).not.toBe(select, 'Expected trigger not to be focused.');
+    }));
+
     it('should update the data binding before emitting the change event', fakeAsync(() => {
       const fixture = TestBed.createComponent(BasicSelectWithoutForms);
       const instance = fixture.componentInstance;

src/lib/select/select.ts

@@ -297,8 +297,12 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     },
   ];
 
+  private _hasFocus = false;
+
   /** Whether the select is focused. */
-  focused = false;
+  get focused() {
+    return this._hasFocus || this._panelOpen;
+  }
 
   /** A name for this control that can be used by `mat-form-field`. */
   controlType = 'mat-select';
@@ -547,7 +551,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     if (this._panelOpen) {
       this._panelOpen = false;
       this._changeDetectorRef.markForCheck();
-      this.focus();
     }
   }
 
@@ -696,7 +699,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
 
   _onFocus() {
     if (!this.disabled) {
-      this.focused = true;
+      this._hasFocus = true;
       this.stateChanges.next();
     }
   }
@@ -706,8 +709,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
    * "blur" to the panel when it opens, causing a false positive.
    */
   _onBlur() {
+    this._hasFocus = false;
+
     if (!this.disabled && !this.panelOpen) {
-      this.focused = false;
       this._onTouched();
       this._changeDetectorRef.markForCheck();
       this.stateChanges.next();
@@ -835,8 +839,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     ).subscribe(event => {
       this._onSelect(event.source);
 
-      if (!this.multiple) {
+      if (!this.multiple && this._panelOpen) {
         this.close();
+        this.focus();
       }
     });