fix(material/input): show focus indication for readonly inputs

src/material-experimental/mdc-input/input.spec.ts

@@ -770,52 +770,6 @@ describe('MatMdcInput without forms', () => {
       expect(container.classList).not.toContain('mat-focused');
     }));
 
-  it('should not highlight when focusing a readonly input', fakeAsync(() => {
-    let fixture = createComponent(MatInputWithReadonlyInput);
-    fixture.detectChanges();
-
-    let input =
-      fixture.debugElement.query(By.directive(MatInput))!.injector.get<MatInput>(MatInput);
-    let container = fixture.debugElement.query(By.css('.mat-mdc-form-field'))!.nativeElement;
-
-    // Call the focus handler directly to avoid flakiness 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');
-  }));
-
-  it('should reset the highlight when a readonly input is blurred', fakeAsync(() => {
-    const fixture = createComponent(MatInputWithReadonlyInput);
-    fixture.detectChanges();
-
-    const inputDebugElement = fixture.debugElement.query(By.directive(MatInput))!;
-    const input = inputDebugElement.injector.get<MatInput>(MatInput);
-    const container = fixture.debugElement.query(By.css('.mat-mdc-form-field'))!.nativeElement;
-
-    fixture.componentInstance.isReadonly = false;
-    fixture.detectChanges();
-
-    // 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(true);
-    expect(container.classList).toContain('mat-focused');
-
-    fixture.componentInstance.isReadonly = true;
-    fixture.detectChanges();
-
-    input._focusChanged(false);
-    fixture.detectChanges();
-
-    expect(input.focused).toBe(false);
-    expect(container.classList).not.toContain('mat-focused');
-  }));
-
   it('should only show the native control placeholder, when there is a label, on focus', () => {
     const fixture = createComponent(MatInputWithLabelAndPlaceholder);
     fixture.detectChanges();
@@ -1654,17 +1608,6 @@ class MatInputOnPush {
   formControl = new FormControl('');
 }
 
-@Component({
-  template: `
-    <mat-form-field>
-      <input matInput [readonly]="isReadonly" value="Only for reading">
-    </mat-form-field>
-  `
-})
-class MatInputWithReadonlyInput {
-  isReadonly = true;
-}
-
 @Component({
   template: `
     <mat-form-field>

src/material/input/input.spec.ts

@@ -905,52 +905,6 @@ describe('MatInput without forms', () => {
     expect(() => formField._animateAndLockLabel()).not.toThrow();
   }));
 
-  it('should not highlight when focusing a readonly input', fakeAsync(() => {
-    const fixture = createComponent(MatInputWithReadonlyInput);
-    fixture.detectChanges();
-
-    const input =
-        fixture.debugElement.query(By.directive(MatInput))!.injector.get<MatInput>(MatInput);
-    const 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');
-  }));
-
-  it('should reset the highlight when a readonly input is blurred', fakeAsync(() => {
-    const fixture = createComponent(MatInputWithReadonlyInput);
-    fixture.detectChanges();
-
-    const inputDebugElement = fixture.debugElement.query(By.directive(MatInput))!;
-    const input = inputDebugElement.injector.get<MatInput>(MatInput);
-    const container = fixture.debugElement.query(By.css('mat-form-field'))!.nativeElement;
-
-    fixture.componentInstance.isReadonly = false;
-    fixture.detectChanges();
-
-    // 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(true);
-    expect(container.classList).toContain('mat-focused');
-
-    fixture.componentInstance.isReadonly = true;
-    fixture.detectChanges();
-
-    input._focusChanged(false);
-    fixture.detectChanges();
-
-    expect(input.focused).toBe(false);
-    expect(container.classList).not.toContain('mat-focused');
-  }));
-
   it('should only show the native placeholder, when there is a label, on focus', () => {
     const fixture = createComponent(MatInputWithLabelAndPlaceholder);
     fixture.detectChanges();
@@ -2117,17 +2071,6 @@ class MatInputOnPush {
   formControl = new FormControl('');
 }
 
-@Component({
-  template: `
-    <mat-form-field>
-      <input matInput [readonly]="isReadonly" value="Only for reading">
-    </mat-form-field>
-  `
-})
-class MatInputWithReadonlyInput {
-  isReadonly = true;
-}
-
 @Component({
   template: `
     <mat-form-field>

src/material/input/input.ts

@@ -351,7 +351,7 @@ export class MatInput extends _MatInputBase implements MatFormFieldControl<any>,
   @HostListener('blur', ['false'])
   // tslint:enable:no-host-decorator-in-concrete
   _focusChanged(isFocused: boolean) {
-    if (isFocused !== this.focused && (!this.readonly || !isFocused)) {
+    if (isFocused !== this.focused) {
       this.focused = isFocused;
       this.stateChanges.next();
     }