fix(input): unable to reset focused state of readonly input (#14698)

Currently we don't float the label if a readonly input is focused, however since we use the same handler for both `focus` and `blur`, it means that if the label is floated while the input is blurred, the user won't be able to reset it.

Author: crisbeto

src/lib/input/input.spec.ts

@@ -853,6 +853,35 @@ describe('MatInput without forms', () => {
     expect(container.classList).not.toContain('mat-focused');
   }));
 
+  it('should reset the highlight when a readonly input is blurred', fakeAsync(() => {
+    const fixture = createComponent(MatInputWithReadonlyInput);
+    fixture.detectChanges();
+
+    const inputDebugElement = fixture.debugElement.query(By.directive(MatInput));
+    const input = inputDebugElement.injector.get<MatInput>(MatInput);
+    const container = fixture.debugElement.query(By.css('mat-form-field')).nativeElement;
+
+    fixture.componentInstance.isReadonly = false;
+    fixture.detectChanges();
+
+    // 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(input.focused).toBe(true);
+    expect(container.classList).toContain('mat-focused');
+
+    fixture.componentInstance.isReadonly = true;
+    fixture.detectChanges();
+
+    input._focusChanged(false);
+    fixture.detectChanges();
+
+    expect(input.focused).toBe(false);
+    expect(container.classList).not.toContain('mat-focused');
+  }));
+
   it('should only show the native placeholder, when there is a label, on focus', () => {
     const fixture = createComponent(MatInputWithLabelAndPlaceholder);
     fixture.detectChanges();
@@ -1833,11 +1862,13 @@ class MatInputOnPush {
 @Component({
   template: `
     <mat-form-field>
-      <input matInput readonly value="Only for reading">
+      <input matInput [readonly]="isReadonly" value="Only for reading">
     </mat-form-field>
   `
 })
-class MatInputWithReadonlyInput {}
+class MatInputWithReadonlyInput {
+  isReadonly = true;
+}
 
 @Component({
   template: `

src/lib/input/input.ts

@@ -310,11 +310,13 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
   }
 
   /** Focuses the input. */
-  focus(): void { this._elementRef.nativeElement.focus(); }
+  focus(): void {
+    this._elementRef.nativeElement.focus();
+  }
 
   /** Callback for the cases where the focused state of the input changes. */
   _focusChanged(isFocused: boolean) {
-    if (isFocused !== this.focused && !this.readonly) {
+    if (isFocused !== this.focused && (!this.readonly || !isFocused)) {
       this.focused = isFocused;
       this.stateChanges.next();
     }