From 98711d75394c51eb9b83aa96674ef16055b09662 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 3 Jan 2019 20:56:51 +0200
Subject: [PATCH] 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.
---
 src/lib/input/input.spec.ts | 35 +++++++++++++++++++++++++++++++++--
 src/lib/input/input.ts      |  6 ++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 89fc650614f2..a087a41ded8f 100644
--- a/src/lib/input/input.spec.ts
+++ b/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: `
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index e754c7a825ab..c11dfe34e33f 100644
--- a/src/lib/input/input.ts
+++ b/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();
     }