bug(FocusMonitor): If a focused element becomes [disabled], attached FocusMonitor still reports the element as focused (FF, non-Chromium Edge).
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par reproduire le problème dans le Stackblitz indiqué avec FocusMonitor et mat-checkbox sur Firefox ou une version d’Edge non basée sur Chromium. Suivez la manière dont FocusMonitor gère le passage à l’état désactivé d’un élément focalisé ; le travail est terminé lorsque la case à cocher désactivée perd ses classes de focus et que les événements ultérieurs de souris ou de focus ne la laissent plus stylée comme si elle était focalisée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- accessibility, frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100