fix(menu-bar): unable to close menu when clicking on toolbar (#9428)

* Fixes not being able to close a toolbar menu by clicking on the wrapping toolbar. Works by adding an extra click handler on the toolbar that closes the menu. Note that the same effect could be achieved by removing the `z-index` altogether, but that could break the functionality that allows users to jump from one menu to the next without clicking.
* Moves the menu bar's z-index to CSS so it's easier to manage.
* Adds call to `disableOpenOnHover` when the scope is destroyed, in order to clean up leftover event handlers.

Fixes #8965.

Author: crisbeto

src/components/menuBar/js/menuBarController.js

@@ -66,6 +66,7 @@ MenuBarController.prototype.init = function() {
   }));
 
   $scope.$on('$destroy', function() {
+    self.disableOpenOnHover();
     while (deregisterFns.length) {
       deregisterFns.shift()();
     }
@@ -82,17 +83,23 @@ MenuBarController.prototype.setKeyboardMode = function(enabled) {
 
 MenuBarController.prototype.enableOpenOnHover = function() {
   if (this.openOnHoverEnabled) return;
-  this.openOnHoverEnabled = true;
 
-  var parentToolbar;
-  if (parentToolbar = this.parentToolbar) {
-    parentToolbar.dataset.mdRestoreStyle = parentToolbar.getAttribute('style');
-    parentToolbar.style.position = 'relative';
-    parentToolbar.style.zIndex = 100;
+  var self = this;
+
+  self.openOnHoverEnabled = true;
+
+  if (self.parentToolbar) {
+    self.parentToolbar.classList.add('md-has-open-menu');
+
+    // Needs to be on the next tick so it doesn't close immediately.
+    self.$mdUtil.nextTick(function() {
+      angular.element(self.parentToolbar).on('click', self.handleParentClick);
+    }, false);
   }
+
   angular
-    .element(this.getMenus())
-    .on('mouseenter', this.handleMenuHover);
+    .element(self.getMenus())
+    .on('mouseenter', self.handleMenuHover);
 };
 
 MenuBarController.prototype.handleMenuHover = function(e) {
@@ -102,14 +109,16 @@ MenuBarController.prototype.handleMenuHover = function(e) {
   }
 };
 
-
 MenuBarController.prototype.disableOpenOnHover = function() {
   if (!this.openOnHoverEnabled) return;
+
   this.openOnHoverEnabled = false;
-  var parentToolbar;
-  if (parentToolbar = this.parentToolbar) {
-    parentToolbar.style.cssText = parentToolbar.dataset.mdRestoreStyle || '';
+
+  if (this.parentToolbar) {
+    this.parentToolbar.classList.remove('md-has-open-menu');
+    angular.element(this.parentToolbar).off('click', this.handleParentClick);
   }
+
   angular
     .element(this.getMenus())
     .off('mouseenter', this.handleMenuHover);
@@ -226,7 +235,6 @@ MenuBarController.prototype.getFocusedMenuIndex = function() {
 
   var focusedIndex = this.getMenus().indexOf(focusedEl);
   return focusedIndex;
-
 };
 
 MenuBarController.prototype.getOpenMenuIndex = function() {
@@ -237,7 +245,13 @@ MenuBarController.prototype.getOpenMenuIndex = function() {
   return -1;
 };
 
+MenuBarController.prototype.handleParentClick = function(event) {
+  var openMenu = this.querySelector('md-menu.md-open');
 
+  if (openMenu && !openMenu.contains(event.target)) {
+    angular.element(openMenu).controller('mdMenu').close();
+  }
+};
 
 
 

src/components/menuBar/menu-bar.scss

@@ -1,9 +1,18 @@
-md-toolbar.md-menu-toolbar {
-  h2.md-toolbar-tools {
-    line-height: 1rem;
-    height: auto;
-    padding: 3.5 * $baseline-grid;
-    padding-bottom: 1.5 * $baseline-grid;
+md-toolbar {
+  &.md-menu-toolbar {
+    h2.md-toolbar-tools {
+      line-height: 1rem;
+      height: auto;
+      padding: 3.5 * $baseline-grid;
+      padding-bottom: 1.5 * $baseline-grid;
+    }
+  }
+
+  // Used to allow hovering from one menu to the
+  // next when inside of a toolbar.
+  &.md-has-open-menu {
+    position: relative;
+    z-index: $z-index-menu;
   }
 }
 

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

@@ -25,6 +25,32 @@ describe('material.components.menuBar', function() {
         expect(nestedMenu.getAttribute('md-position-mode')).toBe('left bottom');
       });
 
+      it('should close when clicking on the wrapping toolbar', inject(function($compile, $rootScope, $timeout) {
+        var ctrl = null;
+        var toolbar = $compile(
+          '<md-toolbar>' +
+            '<md-menu-bar>' +
+              '<md-menu ng-repeat="i in [1, 2, 3]">' +
+                '<button ng-click></button>' +
+                '<md-menu-content></md-menu-content>' +
+              '</md-menu>' +
+            '</md-menu-bar>' +
+          '</md-toolbar>'
+        )($rootScope);
+
+        $rootScope.$digest();
+        ctrl = toolbar.find('md-menu-bar').controller('mdMenuBar');
+
+        toolbar.find('md-menu').eq(0).controller('mdMenu').open();
+        $timeout.flush();
+
+        expect(toolbar).toHaveClass('md-has-open-menu');
+        toolbar.triggerHandler('click');
+
+        expect(toolbar).not.toHaveClass('md-has-open-menu');
+        expect(ctrl.getOpenMenuIndex()).toBe(-1);
+      }));
+
       describe('ARIA', function() {
 
         it('sets role="menubar" on the menubar', function() {