Closed
Description
Explanation
The fix #20966 made it so that the focus origin of an already focused element should change if focusVia
is called on the element. Unfortunately, this doesn't appear to work if the FocusMonitor
is on a parent element and set up with checkChildren = true
. This is because the check here (https://github.com/angular/components/pull/20966/files#diff-02e96e7ea6a7d8f1caecdfdbb7cb38bdcdc5c43db34e4392723cc48765e330b7R316) fails, as nativeElement
doesn't have a registered FocusMonitor
. The FocusMonitor
is instead registered on the parent.
Reproduction
Stackblitz: https://stackblitz.com/edit/angular-ivy-un8eee?file=src/app/hello.component.ts
Steps to reproduce:
- Open DevTools and watch the classes on
document.body
. There is aFocusMonitor
attached to thedocument.body
. - Click on the button "Focus test button with origin". Note that the class
.cdk-mouse-focused
is first added, and then 5 seconds later, is replaced by the class.cdk-keyboard-focused
. This is expected behavior. When this button is clicked, it callsfocusVia
wthkeyboard
origin on the "Test" button after 5 seconds. - Now, again click on the button "Focus test button with origin". After clicking, and within 5 seconds, click on the button "Test". Now observe that the class
.cdk-mouse-focused
is present, and never changes to.cdk-keyboard-focused
. This is not expected behavior. I'd expect the class to change to.cdk-keyboard-focused
due to the fix fix(cdk/a11y): allow for origin of already focused element to be changed #20966. Unfortunately it doesn't, because the checkthis._elementInfo.has(nativeElement)
fails withinfocus-monitor.ts
.
Environment
- Angular: Latest
- CDK/Material: Latest
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): All