Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling MatMenuItem#focus() does not update the MatMenu's focusKeyManager's active item #17761

Closed
pshields opened this issue Nov 20, 2019 · 2 comments · Fixed by #17762 or hrueger/AGLight#112
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@pshields
Copy link

Reproduction

Repro: https://stackblitz.com/edit/components-issue-svmexm

Steps to reproduce:

  1. Open a menu
  2. Programatically focus some mat-menu-item other than the first one (in the stackblitz repro above, the third mat-menu-item, "C" is focused, due to the onOpen() method in AppComponent, which calls the third mat-menu-item's focus method.)
  3. Press the down arrow key (note: a similar variant applies to the up arrow case.)

Expected Behavior

What behavior were you expecting to see?

The next mat-list-item, "D", should be focused.

Actual Behavior

What behavior did you actually see?

The second mat-list-item, "B", is focused.

Analysis

This is happening because the mat menu's FocusKeyManager still thinks the first mat menu item is the active item, even thought we programatically focused a different mat-menu-item. Since mat menu's key manager is private / not exposed to downstream developers, I don't think there's a way to address it currently without a change to Angular Material.

Some possible solutions

  • Update the MatMenuItem#focus method to also update the mat menu's active item at the same time
  • Expose the mat menu's key manager so downstream developers can call its setActiveItem method.
  • Add to the mat menu public API a method to set the active item key manager's active item

Environment

  • Angular: 8
  • CDK/Material: 8
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu
@crisbeto crisbeto self-assigned this Nov 20, 2019
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Nov 20, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 20, 2019
…mmatically

Fixes the internal key manager of the menu being out of sync if one of the menu items is focused via its `focus` method.

Fixes angular#17761.
@crisbeto crisbeto changed the title Calling MatListItem#focus() does not update the MatMenu's focusKeyManager's active item Calling MatMenuItem#focus() does not update the MatMenu's focusKeyManager's active item Nov 27, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 27, 2019
…mmatically

Fixes the internal key manager of the menu being out of sync if one of the menu items is focused via its `focus` method.

Fixes angular#17761.
jelbourn pushed a commit that referenced this issue Dec 4, 2019
…mmatically (#17762)

Fixes the internal key manager of the menu being out of sync if one of the menu items is focused via its `focus` method.

Fixes #17761.
@pshields
Copy link
Author

pshields commented Dec 6, 2019

Thanks, @crisbeto!

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 6, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
2 participants