Description
Reproduction
Repro: https://stackblitz.com/edit/components-issue-svmexm
Steps to reproduce:
- Open a menu
- 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.) - 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