Add a mat-menu-group so that we can open (new) and close (old) menus on a single click.

[andreElrico]

Please describe the feature you would like to request.

Similar has been asked HERE:

For the same reason we have mat-accordion wrapping expansion-panel we need mat-menu-group wrapping mat-menu-trigger.

Currently we have to click 2 times when a menu is already open and we want to open a new one. This feels unnatural to me.

A wrapping instance could control the closing and opening of its menu children.

1. JQUERY EXAMPLE (desired behaviour)
2. CURRENT MAT-MENU (no fluid skimming possible.)

What is the use-case or motivation for this proposal?

Definitely this would provide a better and more fluid UX if we can skim through the menus inside of a mat-menu-group. I like the idea of the backdrop that should still be there OUTSIDE of the mat-menu-group.

[andreElrico]

today I've been working on this feature:

Here is what I came up with:

https://stackblitz.com/edit/angular-eznyyh?file=src%2Fapp%2Fmenu-position-example.html

The part with "random click outside of the menu-stuff" closes the open menu is really tricky.
I solve this currently with stopPropagation of click when the "group" is clicked. However this will not work when I click another arbitrary element that does not propagate the click.

• (TODO) - optimize - close menu on random click outside of menu.

1. (possible solution) keep the backdrop and change the "z-index" of the "menu stuff" to be above the backdrop when open. #hacking #possiblyNotACleanApproach

• (BUG) - when a menu of "case1" is open, and I open a menu of "case2", I have 2 menus open. Probably against the material-specs.

1. (possible solution) provide service that registers all mat-menu-groups:
2. (possible solution) provide an injectionToken with a behaviorSubject as value that allows communication between menu-groups.

@andrewseguin
@jelbourn

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.