From 4fc061963130a029e8e48146ff4745957f8464a6 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 23 Sep 2017 17:18:13 +0200
Subject: [PATCH] fix(input): don't highlight container when readonly input is
 focused

Prevents readonly inputs from being highlighted when they're focused. This is consistent with the native input behavior.

Note: This was introduced initially through #5776, but it looks like it didn't make it through the transition to `mat-form-field`.
---
 src/lib/input/input.spec.ts | 20 ++++++++++++++++++--
 src/lib/input/input.ts      |  8 +++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 5c083fdd825b..575bde2d2e37 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -67,7 +67,7 @@ describe('MdInput without forms', function () {
         MdInputTextareaWithBindings,
         MdInputWithNgIf,
         MdInputOnPush,
-        MdInputWithReadonlyInput,
+        MdInputReadonly,
       ],
     });
 
@@ -697,6 +697,22 @@ describe('MdInput without forms', function () {
     expect(inputContainer._shouldAlwaysFloat).toBe(true);
     expect(inputContainer.floatPlaceholder).toBe('always');
   });
+
+  it('should not highlight when focusing a readonly input', () => {
+    let fixture = TestBed.createComponent(MdInputReadonly);
+    fixture.detectChanges();
+
+    let input = fixture.debugElement.query(By.directive(MdInput)).injector.get<MdInput>(MdInput);
+    let container = fixture.debugElement.query(By.css('md-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(input.focused).toBe(false);
+    expect(container.classList).not.toContain('mat-focused');
+  });
 });
 
 describe('MdInput with forms', () => {
@@ -1360,4 +1376,4 @@ class MdInputOnPush {
     </md-form-field>
   `
 })
-class MdInputWithReadonlyInput {}
+class MdInputReadonly {}
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 85b47dce9dc5..f628531b7348 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -76,6 +76,7 @@ export class MdInput implements MdFormFieldControl<any>, OnChanges, OnDestroy, D
   protected _uid = `md-input-${nextUniqueId++}`;
   protected _errorOptions: ErrorOptions;
   protected _previousNativeValue = this.value;
+  private _readonly = false;
 
   /** Whether the input is focused. */
   focused = false;
@@ -141,6 +142,11 @@ export class MdInput implements MdFormFieldControl<any>, OnChanges, OnDestroy, D
     }
   }
 
+  /** Whether the element is readonly. */
+  @Input()
+  get readonly() { return this._readonly; }
+  set readonly(value: any) { this._readonly = coerceBooleanProperty(value); }
+
   protected _neverEmptyInputTypes = [
     'date',
     'datetime',
@@ -205,7 +211,7 @@ export class MdInput implements MdFormFieldControl<any>, OnChanges, OnDestroy, D
 
   /** Callback for the cases where the focused state of the input changes. */
   _focusChanged(isFocused: boolean) {
-    if (isFocused !== this.focused) {
+    if (isFocused !== this.focused && !this.readonly) {
       this.focused = isFocused;
       this.stateChanges.next();
     }