fix(input): stuck in focused state if disabled while in focus (#8637)

Fixes the input element becoming stuck in its focused state, if it becomes disabled while it's in focus.

Fixes #8634.

Author: crisbeto

src/lib/input/input.spec.ts

@@ -688,6 +688,27 @@ describe('MatInput without forms', () => {
     expect(container.classList).toContain('mat-focused');
   }));
 
+  it('should remove the focused class if the input becomes disabled while focused',
+    fakeAsync(() => {
+      const fixture = TestBed.createComponent(MatInputTextTestController);
+      fixture.detectChanges();
+
+      const input = fixture.debugElement.query(By.directive(MatInput)).injector.get(MatInput);
+      const container = fixture.debugElement.query(By.css('mat-form-field')).nativeElement;
+
+      // Call the focus handler directly to avoid flakyness where
+      // browsers don't focus elements if the window is minimized.
+      input._focusChanged(true);
+      fixture.detectChanges();
+
+      expect(container.classList).toContain('mat-focused');
+
+      input.disabled = true;
+      fixture.detectChanges();
+
+      expect(container.classList).not.toContain('mat-focused');
+    }));
+
   it('should be able to animate the label up and lock it in position', fakeAsync(() => {
     let fixture = TestBed.createComponent(MatInputTextTestController);
     fixture.detectChanges();

src/lib/input/input.ts

@@ -109,7 +109,16 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
   /** Whether the element is disabled. */
   @Input()
   get disabled() { return this.ngControl ? this.ngControl.disabled : this._disabled; }
-  set disabled(value: any) { this._disabled = coerceBooleanProperty(value); }
+  set disabled(value: any) {
+    this._disabled = coerceBooleanProperty(value);
+
+    // Browsers may not fire the blur event if the input is disabled too quickly.
+    // Reset from here to ensure that the element doesn't become stuck.
+    if (this.focused) {
+      this.focused = false;
+      this.stateChanges.next();
+    }
+  }
 
   /** Unique id of the element. */
   @Input()