fix(menuBar): Fix hovering consecutive nested menus.

Fix issue where hovering two consecutive nested menus would not
properly open the second nested menu.

Also adds a test and fixes an issue where the focusMenu() method
of the menu bar controller would not focus the first menu if none
was already selected.

Fixes #6685.

Closes #7361

Author: topherfangio

src/components/menu/js/menuController.js

@@ -87,6 +87,8 @@ function MenuController($mdMenu, $attrs, $element, $scope, $mdUtil, $timeout, $r
       if (self.currentlyOpenMenu && self.currentlyOpenMenu != nestedMenu) {
         var closeTo = self.nestLevel + 1;
         self.currentlyOpenMenu.close(true, { closeTo: closeTo });
+        self.isAlreadyOpening = true;
+        nestedMenu.open();
       } else if (nestedMenu && !nestedMenu.isOpen && nestedMenu.open) {
         self.isAlreadyOpening = true;
         nestedMenu.open();

src/components/menuBar/js/menuBarController.js

@@ -187,7 +187,7 @@ MenuBarController.prototype.focusMenu = function(direction) {
 
   var changed = false;
 
-  if (focusedIndex == -1) { focusedIndex = 0; }
+  if (focusedIndex == -1) { focusedIndex = 0; changed = true; }
   else if (
     direction < 0 && focusedIndex > 0 ||
     direction > 0 && focusedIndex < menus.length - direction

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

@@ -15,6 +15,7 @@ describe('material.components.menuBar', function() {
       it('sets md-position-mode to "bottom left" on nested menus', function() {
         var menuBar = setup();
         var nestedMenu = menuBar[0].querySelector('md-menu');
+
         expect(nestedMenu.getAttribute('md-position-mode')).toBe('left bottom');
       });
 
@@ -25,6 +26,92 @@ describe('material.components.menuBar', function() {
           expect(ariaRole).toBe('menubar');
         });
       });
+
+      describe('nested menus', function() {
+        var menuBar, menus, subMenuOpen, ctrl;
+
+        it('opens consecutive nested menus', function() {
+          menuBar = setup();
+          ctrl = menuBar.controller('mdMenuBar');
+          menus = menuBar[0].querySelectorAll('md-menu md-menu');
+
+          angular.element(document.body).append(menuBar);
+
+          // Open the menu-bar menu
+          ctrl.focusMenu(1);
+          ctrl.openFocusedMenu();
+          waitForMenuOpen();
+
+          // Open the first nested menu
+          openSubMenu(0);
+          waitForMenuOpen();
+          expect(getOpenSubMenu().text().trim()).toBe('Sub 1 - Content');
+
+          // Open the second nested menu, the first menu should close
+          openSubMenu(1);
+          waitForMenuClose();
+
+          // Then the second menu should become visible
+          waitForMenuOpen();
+          expect(getOpenSubMenu().text().trim()).toBe('Sub 2 - Content');
+
+          menuBar.remove();
+        });
+
+        function openSubMenu(index) {
+          // If a menu is already open, trigger the mouse leave to close it
+          if (subMenuOpen) {
+            subMenuOpen.triggerHandler({
+              type: 'mouseleave',
+              target: subMenuOpen[0],
+              currentTarget: subMenuOpen[0]
+            });
+          }
+
+          // Set the currently open sub-menu and trigger the mouse enter
+          subMenuOpen = angular.element(menus[index]);
+          subMenuOpen.triggerHandler({
+            type: 'mouseenter',
+            target: subMenuOpen[0],
+            currentTarget: subMenuOpen[0]
+          });
+        }
+
+        function getOpenSubMenu() {
+          debugger;
+          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'));
+        }
+
+        function setup(){
+          var el;
+          inject(function($compile, $rootScope) {
+            el = $compile([
+              '<md-menu-bar>',
+              '  <md-menu>',
+              '    <md-menu-item>',
+              '      <button ng-click="clicked=true">Button {{i}}</button>',
+              '    </md-menu-item>',
+              '    <md-menu-content class="test-submenu">',
+              '      <md-menu ng-repeat="i in [1, 2]">',
+              '        <md-menu-item>',
+              '          <button ng-click="subclicked=true">Sub Button{{i}}</button>',
+              '        </md-menu-item>',
+              '        <md-menu-content>Sub {{i}} - Content</md-menu-content>',
+              '      </md-menu>',
+              '    </md-menu-content>',
+              '  </md-menu>',
+              '</md-menu-bar>'
+            ].join(''))($rootScope);
+            $rootScope.$digest();
+          });
+          attachedMenuElements.push(el);
+
+          return el;
+        }
+      });
     });
 
     describe('MenuBarCtrl', function() {
@@ -64,6 +151,13 @@ describe('material.components.menuBar', function() {
       describe('#focusMenu', function() {
         var focused;
         beforeEach(function() { focused = false; });
+        it('focuses the first menu if none is focused', function() {
+          var menus = mockButtonAtIndex(0);
+          spyOn(ctrl, 'getFocusedMenuIndex').and.returnValue(-1);
+          spyOn(ctrl, 'getMenus').and.returnValue(menus);
+          ctrl.focusMenu(1);
+          expect(focused).toBe(true);
+        });
         it('focuses the next menu', function() {
           var menus = mockButtonAtIndex(1);
           spyOn(ctrl, 'getFocusedMenuIndex').and.returnValue(0);
@@ -100,13 +194,16 @@ describe('material.components.menuBar', function() {
           var mockButton = {
             querySelector: function() { return {
               focus: function() { focused = true; }
-            }; }
+            }; },
+
+            // TODO: This may need to become more complex if more of the tests use it
+            classList: { contains: function() { return false; } }
           };
           for (var i = 0; i < 3; ++i) {
             if (i == index) {
               result.push(mockButton);
             } else {
-              result.push({});
+              result.push({ classList: mockButton.classList });
             }
           }
           return result;
@@ -307,5 +404,17 @@ describe('material.components.menuBar', function() {
       }
     });
   });
+
+  function waitForMenuOpen() {
+    inject(function($material) {
+      $material.flushInterimElement();
+    });
+  }
+
+  function waitForMenuClose() {
+    inject(function($material) {
+      $material.flushInterimElement();
+    });
+  }
 });