Components: Focus on selected menu item when re-open mat-menu (using keyboard or Mouse)

[Jasmeet2125]

feature request:

Focus should be on the selected menu item when user re-open the mat-menu

What is the expected behavior?

Let's say there are 4 menu items in mat-menu and user selects the 3rd menu item. Now, when user re-open the mat-menu. the focus should be on "item-3" and now if user press down arrow key the focus should move to "item-4".

What is the current behavior?

Considering the above scenario, on re-opening mat-menu, the default focus is on the first item " item-1" and on pressing down arrow key the focus moves to "item-2" instead of "item-4" (as user selected "item-3")

What are the steps to reproduce?

https://stackblitz.com/edit/angular-l9enb6

What is the use-case or motivation for changing an existing behavior?

Better user experience

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7+

[jonathanRinciari]

This does make sense to me for a QOL change, but I would argue that placing the state of the current active menu item inside of the component would not be the right way to go. I would opt for a similar approach to the Tab component, which provides an API for passing down the selectedIndex as well as receive an onChange event when an item is selected. I can take a look at implementing this approach.

[alexw10]

Agree with this issue was going to create one but found this.
Would be much better UX for the focus to remain on the item selected.

[mirsaeedi]

Is there any workaround for this? Can we focus on the selected item programmatically?

[jelbourn]

This isn't something we plan on supporting for the menu. The W3C ARIA Authoring Practices for menu dictate that focus should also go to the first item: https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-12

[markbirenbaum]

My interest in this is to support the creation of drop down lists with richer UI and better accessibility than mat-select. Mat-menu works quite well (including good accessibility) for this purpose, other than this one issue.

Would the recommendation be to go a little more raw and stick a list in an overlay and manually manage selection?

[jelbourn]

FWIW we plan to create a new version of mat-select relatively soon that has much better a11y and should support more complex interactions. I don't have an exact timeframe, but it's currently the top item on our Jira queue.

[angular-automatic-lock-bot[bot]]

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._}