bug(MatInput): read-only inputs are not considered focused
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
#### 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
コントリビューションガイド
調査の方向性
リンク先の StackBlitz を使って動作を再現し、その後 src/material/input/input.ts の344行目付近と src/material/form-field/form-field.ts の139行目付近を調べてください。読み取り専用の input にフォーカスしたことが報告され、周囲の MatFormField に mat-focused クラスと対応するフォーカススタイルが適用されることを確認してください。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 活発さ
- 停滞
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 45/100