Material: mdMenu: md-prevent-menu-close for all elements of a menu

[maximethebault]

Currently, you've to add md-prevent-menu-close on all elements that should prevent the closing of a menu. However, you don't always have control over these elements (imagine a checkbox enclosed in a third-party directive). Plus, even though adding md-prevent-menu-close to all elements allows for fine-grained control, it could be useful to have the ability to prevent menu closing altogether, whatever the element you click on inside the menu.

So, my proposal: adding 'md-prevent-menu-close' attribute to the 'md-menu-content' element would prevent menu closing while interacting with elements inside that same 'md-menu-content' element.

I think only one line would have to be changed. The line https://github.com/angular/material/blob/v1.0.0/src/components/menu/js/menuServiceProvider.js#L294 would become:

if (!target.hasAttribute('disabled') && (!closestMenu || closestMenu == opts.parent[0]) && !hasAnyAttribute(opts.menuContentEl[0], ['md-prevent-menu-close'])) {

Please let me know if it looks good to you. Thanks!

[armellarcier]

+1

[felipekm]

+1
How about the status of this?!

[S8nsick66]

+1

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[tychay]

Would have liked to see this change. I was trying to build an emoji popup menu (tabs inside a menu). When md-tabs are created, material design automatically creates it's own ng-click handlers so therefore there is no way to override tab clicks (or scroll clicks) to prevent it from closing. This change (some way of setting the default for clicks inside a md-menu-content to not close) would have fixed it.