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

A long time ago we disabled focus indication on `readonly` inputs in order to mimic the native browser behavior. It looks like the native behavior has changed to show the focus indication now so these changes remove the old logic and the associated unit tests. Fixes #22783.
angular · Jul 16, 2021 · 4404d0a · 4404d0a
1 parent d090617
commit 4404d0a
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 115 deletions.
diff --git a/src/material-experimental/mdc-input/input.spec.ts b/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>

diff --git a/src/material/input/input.spec.ts b/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>

diff --git a/src/material/input/input.ts b/src/material/input/input.ts
@@ -350,7 +350,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();
     }