md-tabs inside md-menu: menu closes on tab selection

[phynweb]

In trying to separate menu options using tabs, i noticed that selecting a tab closes the menu. Am i missing something? https://jsfiddle.net/phynweb/26zLjzn7/

[marcysutton]

Can you describe the use case for putting tabs into a menu? It sounds like a very poor user experience and something that wouldn't be supported by Material Design.

[phynweb]

You might very well be right and menu's are the wrong component for this. My use case involves having 20+ sets of options that can be applied to one UI widget that occupies one section in a 3x3 grid layout. 10 options are related to the look/feel and the others are related to data source/calculations, hence my thought of having two tabs (cascading menus won't work since some options are multi-select). This is for a comparative technical app, so the options are not open to being abstracted away.

I would like it to be clear to the user which widget's options are being changed by having the "menu" positioned right next to, or on the widget (see center of screenshot below) as opposed to center screen like a modal or dialog. Below is a screenshot of what i'm working on.

I have seen similar tabbed option views particularly with financial charting where its common to have so many options that the UI ends up being a soup of meaningless icons. I am trying to create a more minimal version of the screenshot below except that that it pops up right next to its icon trigger (on the source widget) as opposed to the center of the screen. Any alternative ideas are welcome.

[ThomasBurleson]

@phynweb - referring to the financial snapshot above, I see a modal dialog with tabs; not a menu. A menu should never have a tabbed content. What you want is a way to position a modal dialog relative to a target element.

[phynweb]

@ThomasBurleson I understand that the financial snapshot shows a modal with tabs. I tried using md-menu as an alternative because of its automatic relative positioning...

"I would like it to be clear to the user which widget's options are being changed by having the "menu" positioned right next to, or on the widget (see center of screenshot below) as opposed to center screen like a modal or dialog."

At this point, its clear to me that i'm trying to do something with menu's that i shouldn't. I just reviewed the $mdDialog API again and it seems i can achieve the same via thing by dynamically setting the dialog parent element.

Also, in hindsight, it makes perfect sense that a menu should close on click.....afterall, that's what menu's do! Thanks @marcysutton and @ThomasBurleson for your help/pointers.