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

When an mdMenuBar contains a menu and that menu is opened, the menu bar will receives a CSS class that ultimately affects its z-index. When the menu is closed, the CSS class is supposed to be removed from the menu bar.

When the menu has multiple levels, the menu hierarchy can not be correctly resolved upon menu closure. This results in the CSS class not being removed from the menu bar.

I assumed that this failure is mostly due to the attempt to detect menu structure through DOM traversal, which will not work in this case as the menu hierarchy is not directly reflected in the DOM structure (menus are attached to the body instead).

Fixes #11235

Author: oliversalzburg

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() {