menu: multiple open children menus

[striche2]

Actual Behavior:

• What is the issue? * When navigating around an mdMenuBar that contains multiple nested menus, sometimes child menus will fail to close, causing multiple child menus to be open at once.
• What is the expected behavior? When you navigate away from a menu item that is the parent of a child menu, the child menu should close.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/striche/pen/QpQpRo
• Details: This CodePen is simply the mdMenuBar demo, but adjusted so that there are multiple entries featuring child menus. If you drag your mouse down the list of "New" entries very very slowly it works fine. But as you slowly increase the speed of your drag, you will find that if you stop and rest on a new there is a high probability that there are multiple instances of the "Document, Presentation, Spreadsheet, etc" list open at once. The problem appears to be related to the show function, specifically in the sub-function provided to hideAction.then (line 3649 in the release copy of 1.1.3). If I move the showingInterims.push(interimElement); out of the finally block and call it before return interimElement, the problem goes away (http://codepen.io/striche/pen/zZRZVq). This suggests the menus fail to close because the close is triggering before the show promise resolves, so the menu is not yet in showingInterims and so in in the hide function it doesn't get caught in the showingInterims map to closeElement.

AngularJS Versions: *

• AngularJS Version: 1.6.1
• AngularJS Material Version: 1.1.3

Additional Information:

• Browser Type: * Chrome
• Browser Version: * Version 57.0.2987.110 (64-bit)
• OS: * Windows 10
• Stack Traces:

[mestremuten]

@striche2 fix seems to do the trick for now.

material/src/core/services/interimElement/interimElement.js

Line 316 in e06284a

showingInterims.push(interimElement);

var showAction = hideAction.then(function() {
  // Move it here
  showingInterims.push(interimElement);

  return interimElement
    .show()
    .catch(function(reason) { return reason; })
    .finally(function() {
      showPromises.splice(showPromises.indexOf(showAction), 1);
      // Move following line at beginning of showAction's then callback
      //showingInterims.push(interimElement);
    });
});

[Splaktar]

This was partially fixed by PR #11471 in 1.1.14.

But there are still some issues that we are tracking in #11011.