diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index 0576a067b30d..7cf2c091bc91 100644 --- a/src/lib/input/input.spec.ts +++ b/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(); diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index 9adf81827219..c597aae2667b 100644 --- a/src/lib/input/input.ts +++ b/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()