diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index 1743fca7fde..b3ba3a3ded6 100644 --- a/src/lib/input/input.spec.ts +++ b/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); + 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', () => { diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index c8f35711724..c1681a97c2b 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -76,6 +76,7 @@ export class MatInput implements MatFormFieldControl, 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, 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, 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(); }