fix(select): don't blur label when trigger is blurred while the panel is opened (#11537)

Considers a select as focused as long as a its panel is open, even if the trigger loses focus. This avoids cases where the label can be seen blinking in the background when an option is toggled in multi-select mode.

Author: crisbeto

src/lib/select/select.spec.ts

@@ -1071,6 +1071,26 @@ describe('MatSelect', () => {
         expect(document.querySelectorAll('.cdk-overlay-container mat-option').length)
             .toBeGreaterThan(0, 'Expected at least one option to be rendered.');
       }));
+
+      it('should not consider itself as blurred if the trigger loses focus while the ' +
+        'panel is still open', fakeAsync(() => {
+          const selectElement = fixture.nativeElement.querySelector('.mat-select');
+          const selectInstance = fixture.componentInstance.select;
+
+          dispatchFakeEvent(selectElement, 'focus');
+          fixture.detectChanges();
+
+          expect(selectInstance.focused).toBe(true, 'Expected select to be focused.');
+
+          selectInstance.open();
+          fixture.detectChanges();
+          flush();
+          dispatchFakeEvent(selectElement, 'blur');
+          fixture.detectChanges();
+
+          expect(selectInstance.focused).toBe(true, 'Expected select element to remain focused.');
+        }));
+
     });
 
     describe('selection logic', () => {

src/lib/select/select.ts

@@ -310,7 +310,17 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   private _disableOptionCentering: boolean = false;
 
   /** Whether the select is focused. */
-  focused: boolean = false;
+  get focused(): boolean {
+    return this._focused || this._panelOpen;
+  }
+  /**
+   * @deprecated Setter to be removed as this property is intended to be readonly.
+   * @deletion-target 8.0.0
+   */
+  set focused(value: boolean) {
+    this._focused = value;
+  }
+  private _focused = false;
 
   /** A name for this control that can be used by `mat-form-field`. */
   controlType = 'mat-select';
@@ -718,7 +728,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
 
   _onFocus() {
     if (!this.disabled) {
-      this.focused = true;
+      this._focused = true;
       this.stateChanges.next();
     }
   }
@@ -728,7 +738,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
    * "blur" to the panel when it opens, causing a false positive.
    */
   _onBlur() {
-    this.focused = false;
+    this._focused = false;
 
     if (!this.disabled && !this.panelOpen) {
       this._onTouched();