From 349121d1eabc409fe14c21ec115b3bf16811d848 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 20 Jul 2017 05:33:04 +0300
Subject: [PATCH] fix(input): don't highlight container when readonly input is
 focused (#5776)

Fixes #5749.
---
 src/lib/input/input-container.spec.ts | 43 +++++++++++++++++++++++++++
 src/lib/input/input-container.ts      | 12 +++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts
index f1f27bf3c1da..cb31144b2670 100644
--- a/src/lib/input/input-container.spec.ts
+++ b/src/lib/input/input-container.spec.ts
@@ -62,6 +62,7 @@ describe('MdInputContainer without forms', function () {
         MdTextareaWithBindings,
         MdInputContainerWithNgIf,
         MdInputContainerOnPush,
+        MdInputContainerWithReadonlyInput,
       ],
     });
 
@@ -604,6 +605,39 @@ describe('MdInputContainer without forms', function () {
 
     expect(placeholder.classList).not.toContain('mat-empty', 'Input no longer empty');
   });
+
+  it('should set the focused class when the input is focused', () => {
+    let fixture = TestBed.createComponent(MdInputContainerTextTestController);
+    fixture.detectChanges();
+
+    let input = fixture.debugElement.query(By.directive(MdInputDirective))
+      .injector.get<MdInputDirective>(MdInputDirective);
+    let container = fixture.debugElement.query(By.css('md-input-container')).nativeElement;
+
+    // Call the focus handler directly to avoid flakyness where
+    // browsers don't focus elements if the window is minimized.
+    input._onFocus();
+    fixture.detectChanges();
+
+    expect(container.classList).toContain('mat-focused');
+  });
+
+  it('should not highlight when focusing a readonly input', () => {
+    let fixture = TestBed.createComponent(MdInputContainerWithReadonlyInput);
+    fixture.detectChanges();
+
+    let input = fixture.debugElement.query(By.directive(MdInputDirective))
+      .injector.get<MdInputDirective>(MdInputDirective);
+    let container = fixture.debugElement.query(By.css('md-input-container')).nativeElement;
+
+    // Call the focus handler directly to avoid flakyness where
+    // browsers don't focus elements if the window is minimized.
+    input._onFocus();
+    fixture.detectChanges();
+
+    expect(input.focused).toBe(false);
+    expect(container.classList).not.toContain('mat-focused');
+  });
 });
 
 describe('MdInputContainer with forms', () => {
@@ -1230,3 +1264,12 @@ class MdInputContainerWithNgIf {
 class MdInputContainerOnPush {
   formControl = new FormControl('');
 }
+
+@Component({
+  template: `
+    <md-input-container>
+      <input mdInput readonly value="Only for reading">
+    </md-input-container>
+  `
+})
+class MdInputContainerWithReadonlyInput {}
diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
index e978db4d3e7e..9e960841bb9d 100644
--- a/src/lib/input/input-container.ts
+++ b/src/lib/input/input-container.ts
@@ -141,6 +141,7 @@ export class MdInputDirective {
   private _placeholder: string = '';
   private _disabled = false;
   private _required = false;
+  private _readonly = false;
   private _id: string;
   private _cachedUid: string;
   private _errorOptions: ErrorOptions;
@@ -196,6 +197,11 @@ export class MdInputDirective {
     }
   }
 
+  /** Whether the element is readonly. */
+  @Input()
+  get readonly() { return this._readonly; }
+  set readonly(value: any) { this._readonly = coerceBooleanProperty(value); }
+
   /** A function used to control when error messages are shown. */
   @Input() errorStateMatcher: ErrorStateMatcher;
 
@@ -247,7 +253,11 @@ export class MdInputDirective {
   /** Focuses the input element. */
   focus() { this._elementRef.nativeElement.focus(); }
 
-  _onFocus() { this.focused = true; }
+  _onFocus() {
+    if (!this._readonly) {
+      this.focused = true;
+    }
+  }
 
   _onBlur() { this.focused = false; }