mdMenu sometimes blocks the entire screen

[vprenner]

I managed to reproduce this on the Angular Material demo site as well (see screenshot).

When clicking on the menu sometimes it creates a md-backdrop element upon opening. This element covers everything and you cannot click anything anymore.

I saw this bug was reported a few times ago as well. Seems it's still there.

I manage to reproduce it in the rc3 version as well as the head version.

Steps to reproduce: just keep clicking an icon (i was clicking on the width="4" one on the bottom of the demo page). Once the menu opens, close it by clicking outside the menu. Do this a few times and the UI will be blocked by the md-menu-backdrop.

On the Angular Material demo site it happens rarely. On the site I'm working on it happens quite often (in 50% of cases cca).

Testing was done on Chrome v44.

[luclanet]

+1 Same problem for me

[clshortfuse]

Does it have focus? If it doesn't, then it's the same issue as this one I posted. I thought it was Android specific, but it might just occur often on Android?

#3888

There were recent changes with dealing with the open animation. Maybe it's getting stuck.

It could be a timing issue where the backdrop gets dropped in at the wrong time, covering the menu elementsand blocking mouse inputs.

˜˜Edit: This might be the culprit:˜˜

˜˜623496efd70752405018dab3a44a1dee24449ebb˜˜

˜˜Can somebody undo this change to md-menu and see if the problem persists?˜˜

Found it. It has to do with the onShow animator, specifically here:

.waitTransitionEnd(element, {timeout: 370}).

It times out on Android (and I'm assuming some PCs). The timeout isn't working properly so it just fails and blocks access. If you increase the timeout (I tried the default 3000), it works.

I'm going to close the other issue as this is more general and maybe do a PR if I can fix it myself.

Okay, last comment. Replace .then with .finally immediately after and it works. Will build PR now (unless somebody beats me to it.)

[lcpereira-zz]

Hello,

I'm having the same problem, the fix is already in the master?

Thank you.

[stevenmiles]

Having the same issue with 0.10.1-rc3 with angular 1.4.3 in my application. Just tried it in the in the documentation app and managed to reproduce it. I found it easier to reproduce it with IE11.

[stefan-schweiger]

Relevant #3837

[KReden]

Relevant - See my update to my closed issue #3773

[jozsi]

Still happening in 0.10.1-rc4 (& angular 1.3.15).

[ThomasBurleson]

This will be fixed soon and committed to master.

[stefan-schweiger]

@ThomasBurleson but now everything with a ng-click on it (including md-menu) does not work in IE anymore #3943

[vprenner]

@stefan-schweiger I don't think that's it because it is broken in RC4 as well.
https://material.angularjs.org/0.10.1-rc4/#/demo/material.components.menu

Works in Microsoft Edge though :)

[ThomasBurleson]

@stefan-schweiger, @vprenner - can you confirm that this SHA af05235
fix resolves your IE issues ?

Angular Material builds with 'use strict;' for all of our modules. Unfortunately, window.parent already exists so strict mode will not fail at runtime.

[vprenner]

i can confirm that ng-click now works in ie11 with the build from master.
also the original issue seems to be alright.

[ThomasBurleson]

👍