md-menu: md-backdrop does not get removed

[stefan-schweiger]

I have a hard time reproducing this but sometimes (like every 5th time) when using the md-menu the md-backdrop does not get removed when clicking on a menu option, and the whole site becomes unclickable.

This is what the end of my html page looks like when it stops working.

<div class="md-scroll-mask" style="z-index: 50">
    <div class="md-scroll-mask-bar"></div>
</div>
<md-backdrop class="md-menu-backdrop md-click-catcher md-default-theme">
</md-backdrop>
<div class="md-open-menu-container md-whiteframe-z2 md-default-theme md-active md-clickable"
     style="top: 58px; left: 171.515625px; -webkit-transform-origin: left top 0px;">
    <md-menu-content class="md-default-theme">
        <md-menu-item>
            <button class="md-button md-default-theme"
                    ng-transclude=""
                    ng-click="vm.onSplit('vertical')"
                    ng-disabled="vm.item.sizeX <= 1"
                    aria-label="split vertical"
                    tabindex="0"
                    aria-disabled="false">

                <md-icon class="mdi mdi-split ng-scope ng-isolate-scope md-default-theme"
                         aria-hidden="true">
                </md-icon>
                <span class="ng-binding ng-scope">Split vertical</span>
            </button>
        </md-menu-item>
        [...]
    </md-menu-content>
</div>

EDIT: At first I suspected md-scroll-mask caused this, but it apparently didn't

[epelc]

I think this is the reason for my issue #3714

It's not being removed if you use ui-sref or an ng-click that opens a dialog.

[stefan-schweiger]

You are probably right!

I don't open a dialog in my ng-click but add an item to an array which I use for ng-repeat so there is also some DOM manipulation going on, which I assume for some reason breaks the removal of the other DOM element.

[stefan-schweiger]

@rschmukler seems like this fixed my issue as well, I'm closing it.

[justindujardin]

This issue is still happening intermittently in 0.10.1.

Our use-case is that we have an md-menu that we trigger as a context menu. When you rapidly display/dismiss the menu, by selecting a valid item, sometimes the backdrop will not be removed. At this point the entire app will become unresponsive to click/touch interactions and will not recover.

I dug into it a bit with a colleague and we noticed that when this bug is happening, the backdrop click handler is still registered and fires, which calls closeMenu and immediately returns because it thinks the menu is closed.

  function closeMenu(skipFocus) {
    if ( !ctrl.isOpen ) return; // <-- here

    ctrl.isOpen = false;
    triggerElement && triggerElement.setAttribute('aria-expanded', 'false');
    $mdMenu.hide();

    if (!skipFocus) {
      $element.children()[0].focus();
    }
  }

[charliecys]

same issue as @justindujardin but mine happens each time mdMenu is clicked. (refreshing the page was the only way to get rid of md-backdrop). This happen in 0.10.1.
Downgrading to 0.10.0 was how i got rid of this issue.

[stefan-schweiger]

you should probably open a new issue, because I guess the developers don't look much into already closed issues.

EDIT: Guess I'm wrong haha