fix(menu-bar): z-index not restored on menu close

src/components/menu/js/menuController.js

@@ -29,6 +29,7 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
     triggerElement.setAttribute('aria-expanded', 'false');
 
     this.isInMenuBar = opts.isInMenuBar;
+    this.mdMenuBarCtrl = opts.mdMenuBarCtrl;
     this.nestedMenus = $mdUtil.nodesToArray(menuContainer[0].querySelectorAll('.md-nested-menu'));
 
     menuContainer.on('$mdInterimElementRemove', function() {

src/components/menu/js/menuDirective.js

@@ -258,6 +258,7 @@ function MenuDirective($mdUtil) {
   function link(scope, element, attr, ctrls) {
     var mdMenuCtrl = ctrls[0];
     var isInMenuBar = !!ctrls[1];
+    var mdMenuBarCtrl = ctrls[1];
     // Move everything into a md-menu-container and pass it to the controller
     var menuContainer = angular.element('<div class="_md md-open-menu-container md-whiteframe-z2"></div>');
     var menuContents = element.children()[1];
@@ -275,7 +276,6 @@ function MenuDirective($mdUtil) {
 
     element.append(menuContainer);
     menuContainer[0].style.display = 'none';
-    mdMenuCtrl.init(menuContainer, { isInMenuBar: isInMenuBar });
-
+    mdMenuCtrl.init(menuContainer, { isInMenuBar: isInMenuBar, mdMenuBarCtrl: mdMenuBarCtrl });
   }
 }

src/components/menuBar/js/menuBarController.js

@@ -51,17 +51,18 @@ MenuBarController.prototype.init = function() {
       el[0].classList.remove('md-open');
     }
 
-    if ($element[0].contains(el[0])) {
+    var ctrl = angular.element(el[0]).controller('mdMenu');
+    if (ctrl.isInMenuBar && ctrl.mdMenuBarCtrl === self) {
       var parentMenu = el[0];
       while (parentMenu && rootMenus.indexOf(parentMenu) == -1) {
         parentMenu = $mdUtil.getClosest(parentMenu, 'MD-MENU', true);
       }
       if (parentMenu) {
         if (!opts.skipFocus) parentMenu.querySelector('button:not([disabled])').focus();
         self.currentlyOpenMenu = undefined;
-        self.disableOpenOnHover();
-        self.setKeyboardMode(true);
       }
+      self.disableOpenOnHover();
+      self.setKeyboardMode(true);
     }
   }));
 

src/components/menuBar/menu-bar.spec.js

@@ -61,6 +61,116 @@ describe('material.components.menuBar', function() {
         });
       }));
 
+      it('should close when clicking on a menu item', inject(function($compile, $rootScope, $timeout, $material) {
+        var toolbar = $compile(
+          '<md-toolbar class="md-menu-toolbar">' +
+            '<md-menu-bar>' +
+              '<md-menu>' +
+                '<button ng-click="clicked=true">root</button>' +
+                '<md-menu-content>' +
+                  '<md-menu-item>' +
+                    '<md-button ng-click="subclicked=true">child</md-button>' +
+                  '</md-menu-item>' +
+                '</md-menu-content>' +
+              '</md-menu>' +
+            '</md-menu-bar>' +
+          '</md-toolbar>'
+        )($rootScope);
+
+        $rootScope.$digest();
+        attachedMenuElements.push(toolbar); // ensure it gets cleaned up
+
+        var ctrl = toolbar.find('md-menu-bar').controller('mdMenuBar');
+        var rootMenu = toolbar[0].querySelector('md-menu');
+
+        angular.element(document.body).append(toolbar);
+
+        var menuCtrl = angular.element(rootMenu).controller('mdMenu');
+
+        menuCtrl.open();
+        waitForMenuOpen();
+
+        expect(toolbar).toHaveClass('md-has-open-menu');
+        spyOn(menuCtrl, 'close').and.callThrough();
+
+        var subMenu = getOpenSubMenu();
+        var childButton = subMenu[0].querySelector('md-button');
+        childButton.dispatchEvent(new MouseEvent('click'));
+        waitForMenuClose();
+
+        expect(toolbar).not.toHaveClass('md-has-open-menu');
+        expect(ctrl.getOpenMenuIndex()).toBe(-1);
+        expect(menuCtrl.close).toHaveBeenCalledWith(true, {
+          closeAll: true
+        });
+
+        function getOpenSubMenu() {
+          var containers = document.body.querySelectorAll('.md-open-menu-container.md-active');
+          var lastContainer = containers.item(containers.length - 1);
+
+          return angular.element(lastContainer.querySelector('md-menu-content'));
+        }
+      }));
+
+      it('should close when clicking on a nested menu item', inject(function($compile, $rootScope, $timeout, $material) {
+        var toolbar = $compile(
+          '<md-toolbar class="md-menu-toolbar">' +
+            '<md-menu-bar>' +
+              '<md-menu>' +
+                '<button>root</button>' +
+                '<md-menu-content>' +
+                  '<md-menu-item>' +
+                    '<md-menu>' +
+                      '<md-button ng-click="$mdMenu.open()">child</md-button>' +
+                      '<md-menu-content>' +
+                        '<md-menu-item>' +
+                          '<md-button>grandchild</md-button>' +
+                        '</md-menu-item>' +
+                      '</md-menu-content>' +
+                    '</md-menu>' +
+                  '</md-menu-item>' +
+                '</md-menu-content>' +
+              '</md-menu>' +
+            '</md-menu-bar>' +
+          '</md-toolbar>'
+        )($rootScope);
+
+        $rootScope.$digest();
+        attachedMenuElements.push(toolbar); // ensure it gets cleaned up
+
+        var ctrl = toolbar.find('md-menu-bar').controller('mdMenuBar');
+        var rootMenu = toolbar[0].querySelector('md-menu');
+
+        angular.element(document.body).append(toolbar);
+
+        var menuCtrl = angular.element(rootMenu).controller('mdMenu');
+
+        menuCtrl.open();
+        waitForMenuOpen();
+
+        expect(toolbar).toHaveClass('md-has-open-menu');
+
+        var subMenu = getLastOpenSubMenu();
+        var childButton = subMenu[0].querySelector('md-button');
+        childButton.dispatchEvent(new MouseEvent('click'));
+        waitForMenuOpen();
+
+        var nestedMenu = getLastOpenSubMenu();
+        var nestedButton = nestedMenu[0].querySelector('md-button');
+        nestedButton.dispatchEvent(new MouseEvent('click'));
+        waitForMenuClose();
+
+        expect(toolbar).not.toHaveClass('md-has-open-menu');
+        expect(ctrl.getOpenMenuIndex()).toBe(-1);
+
+        function getLastOpenSubMenu() {
+          var containers = document.body.querySelectorAll('.md-open-menu-container.md-active');
+          var lastContainer = containers.item(containers.length - 1);
+
+          return angular.element(lastContainer.querySelector('md-menu-content'));
+        }
+      }));
+
       describe('ARIA', function() {
 
         it('sets role="menubar" on the menubar', function() {