angular / angular/components

bug(MatInput): read-only inputs are not considered focused

Aperta
#21,262 5 commenti 2 reazioni 0 assegnatari Vedi su GitHub
area: material/form-field needs: discussion P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Reproduction
[StackBlitz](https://stackblitz.com/edit/focused-readonly-input-bug)

Steps to reproduce:
1. Use the toggle to place the input in a read-only state
2. Tab to or click on the input to give it focus
3. Observe that the input has focus, but `MatInput` does not report it as focused


#### Expected Behavior
According to the Material [Text fields spec -> Read-only fields](https://material.io/components/text-fields#input-types)
>A read-only text field is styled the same as a regular text field.

Read-only inputs should receive the same focus styles as regular inputs. The `MatFormField` component conditionally applies focus styles (`mat-focused` class) based on the `focused` property of the `MatInput`.
https://github.com/angular/components/blob/master/src/material/form-field/form-field.ts#L139

When a read-only input is focused, `MatInput` should report it as focused to ensure focus styles are applied correctly.

#### Actual Behavior
`MatInput` filters out focus events on read-only inputs, always reporting them as not focused.
https://github.com/angular/components/blob/master/src/material/input/input.ts#L344

This results in the `mat-focused` class never being applied to `MatFormField`'s that wrap read-only inputs.

#### Environment

- Angular: 10.2.3
- CDK/Material: 10.2.7
- Browser(s): N/A
- Operating System (e.g. Windows, macOS, Ubuntu): N/A

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci il comportamento usando lo StackBlitz collegato, quindi esamina src/material/input/input.ts intorno alla riga 344 e src/material/form-field/form-field.ts intorno alla riga 139. Conferma che la messa a fuoco di un input di sola lettura venga segnalata e che il MatFormField circostante riceva la classe mat-focused e i relativi stili di focus.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.