bug(FocusMonitor): If a focused element becomes [disabled], attached FocusMonitor still reports the element as focused (FF, non-Chromium Edge).
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### Reproduction
Stackblitz: https://stackblitz.com/edit/angular-atdzsd
*Steps to reproduce:*
1. Open the Stackblitz above on either FF or non-Chromium Edge. The Stackblitz contains a `mat-checkbox` that disables itself when activated.
2. Activate the `mat-checkbox` with space. Observe that the `mat-checkbox` is now indeed disabled.
---
#### Expected Behavior
I'd expect that the `mat-checkbox` loses its focus styles (and essentially all of the issues in "Actual Behavior" don't occur).
#### Actual Behavior
Observe the following after activating the `mat-checkbox` with space:
1. The `mat-checkbox` still has the classes `.cdk-focused` and `.cdk-keyboard-focused`.
2. As a result, the `mat-checkbox` still has focus styles.
3. If you query for the `document.activeElement`, it returns the `mat-checkbox`.
4. Subsequent mouse clicks & focus events on the page do not cause the `mat-checkbox` to lose its focus styles (i.e. it looks focused essentially forever).
All of the above are unexpected.
#### What's Happening
On FF and non-Chromium Edge, when a focused element is `[disabled]` it (1) remains the `document.activeElement` and (2) consequently no `blur` event is emitted. These appear to be browser bugs. As a result of this behavior, the attached `FocusMonitor` on `mat-checkbox` (and other components like `mat-button`) never receives a `blur` event to remove the `.cdk-focused` and `.cdk-keyboard-focused` classes on the element.
#### Potential Solution
We could add some work-around logic to `FocusMonitor` to listen if a monitored element becomes `[disabled]`, and if so, do the same thing we'd do if the element was actually blurred.
#### Environment
- Angular: Latest
- CDK/Material: Latest
- Browser(s): FF, non-Chromium Edge
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
Beitragsleitfaden
Rechercherichtung
Beginne damit, das Problem im verlinkten Stackblitz mit FocusMonitor und mat-checkbox unter Firefox oder nicht auf Chromium basierendem Edge zu reproduzieren. Verfolge, wie FocusMonitor mit einem fokussierten Element umgeht, das deaktiviert wird; als erledigt gilt die Aufgabe, wenn die deaktivierte Checkbox ihre Fokusklassen verliert und spätere Maus- oder Fokusereignisse sie nicht mehr als fokussiert darstellen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- accessibility, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100