Skip to content

bug(FocusMonitor): Focus origin of already focused element doesn't change if FocusMonitor is on parent with checkChildren set to true. #21500

Closed
@zelliott

Description

@zelliott

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:

  1. Open DevTools and watch the classes on document.body. There is a FocusMonitor attached to the document.body.
  2. 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 calls focusVia wth keyboard origin on the "Test" button after 5 seconds.
  3. 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 check this._elementInfo.has(nativeElement) fails within focus-monitor.ts.

Environment

  • Angular: Latest
  • CDK/Material: Latest
  • Browser(s): All
  • Operating System (e.g. Windows, macOS, Ubuntu): All

Metadata

Metadata

Assignees

Labels

AccessibilityThis issue is related to accessibility (a11y)GThis is is related to a Google internal issueP3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions