fix(input): don't highlight container when readonly input is focused (#5776)

Fixes #5749.

Author: crisbeto

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 {}

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; }