bug(FocusMonitor): If a focused element becomes [disabled], attached FocusMonitor still reports the element as focused (FF, non-Chromium Edge).

[zelliott]

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

[sandeeppatidar30]

I'm also facing the same issue on material button when button is disabled at first and then enabled programmatically but still that button highlighted although that button is not active in DOM at that moment.

[pavankalyan-codes]

Can you please assign this to me. I can work on this.

[aHereitani]

Any news on this? The bug causes a11y issues when keyboard-navigating the Paginator:

https://v13.material.angular.io/components/paginator/overview

Steps to reproduce:

• focus "next page" button by tabbing to it
• go to last page by space key, so button becomes disabled
• shift-tab to "previous page" button, trigger with space key

Result: "next page" button becomes enabled. Both buttons appear focused as classes never got removed.

[bjesuiter]

Have the Same Problem, any development here?

[bjesuiter]

Our Hotfix: Simply stopping and starting focus monitoring on the element in question.
This removes the focus styles from the elements and leaves the page with nothing selected.

const itemToFocus = document.getElementById("my-button-which-gets-disabled-later");
if(itemToFocus !== null) {
  this._focusMonitor.stopMonitoring(itemToFocus);
  this._focusMonitor.monitor(itemToFocus);
}