Material: menu: nested mdMenu broken by recent PR #11427

[gameboy1024]

Bug:

Nested mdMenu broken by recent PR #11427

Nested mdMenu now behaves weirdly with mouse interactions (see videos at the end and codepen links below for repro). With some investigation I was able to pinpoint the issue to be a recent change in InterimElement's hide() function. This change was made with PR #11427, merged into master 20 days ago (around Oct 19th).

Apparently the PR was trying to fix another issue but unfortunately it brings a new issue. It's related to how nested mdMenu dismisses 2 level items when user hover on first level items. I can't see how this works yet (mdMenu and mdMenuBar are complex components/services), but I've proven that this caused the exact issue by having side by side controlled experiment.

Since it's quite common to have nested menu in AngularJS and it significantly downgrade the usability of websites, I recommend this as a high priority issue.

CodePen and steps to reproduce the issue:

CodePen Demos

• Broken version: https://codepen.io/gameboy1024/pen/jQqyGo
• Working version: https://codepen.io/gameboy1024/pen/LXNxzy

Note the links of AngularMaterial I used in the demos are

• Broken version: https://cdn.gitcdn.link/cdn/angular/bower-material/master/angular-material.js
• Working version: https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.js

It's possible that the behavior changes when the CDNs update the sources. In that case you can download the file and manually replace the hide(reason, options) function. You can also find video recording at the end

Detailed Reproduction Steps:

1. Go to the broken version
2. Click Organizations to open the menu
3. Click or move your mouse over the first level elements
4. At some point, you see that nested menus stop to populate
5. Click outside of the window to close the menu
6. Click Organizations to open the menu again
7. Move your mouse over the first level elements, the menu dismisses itself randomly when you change current focus.

What is the expected behavior?

Nested mdMenu should work reliably with dimiss/hover/develop/close as it was before.

What is the current behavior?

Nested mdMenu stops working when used several times. It became unusable as it randomly dismisses itself when moving the mouse.

Which versions of AngularJS, Material, OS, and browsers are affected?

Any version after PR #11427 , commit: f616b25.

• AngularJS: 1.6.7 (should be any)
• AngularJS Material: Latest
• OS: Linux based (should be any)
• Browsers: Chrome (should be any)

Is there anything else we should know? Stack Traces, Screenshots, etc.

Video recording of broken and working copy

[marosoft]

@gameboy1024 Thank you for reporting it.
I made some changes to my fix.

Please check the CodePens:

• Nested menu Demo. Copy of your demo with modified lib.
• Toast Demo #10715. Copy of my demo with modified lib.

@Splaktar Please check this one. I have a fix ready as you can see above. Should I create another PR as #11427 is already closed?

[gameboy1024]

Thanks @marosoft for the quick fix, I can confirm that it works as intended with your demo.

[Splaktar]

@gameboy1024 thank you for testing against master and reporting this before 1.1.11 was released!

@marosoft yes, please create a new PR. Thanks for looking at this!