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

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`.

Author: crisbeto

src/lib/input/input.spec.ts

@@ -697,6 +697,22 @@ describe('MatInput 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(MatInputWithReadonlyInput);
+    fixture.detectChanges();
+
+    let input = fixture.debugElement.query(By.directive(MatInput)).injector.get<MatInput>(MatInput);
+    let container = fixture.debugElement.query(By.css('mat-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('MatInput with forms', () => {

src/lib/input/input.ts

@@ -76,6 +76,7 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
   protected _uid = `mat-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 MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
     }
   }
 
+  /** 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 MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
 
   /** 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();
     }