Angular material menu opening on mouse hover

Question

I'm using Angular Material menubar to show a menu and the sub menu under each menu item. I've added ng-click event to open the submenu. But the menu is still opening on mouse hover on the parent menu item. Not only this, as I have two sub menus, for the first submenu item, the submenu is opening on mouse hover but the second submenu is not opening on mouse hover. How i can stop this menu opening on mouse over. I tried to stop event propagation on mouseenter on the parent menu item. But then at the time of opening second submenu the first submenu is not being hidden. Please help me how to fix it.

<div ng-controller="DemoBasicCtrl as ctrl" ng-cloak="" class="menuBardemoBasicUsage" ng-app="MyApp">

    <md-menu-bar>
      <md-menu>
        <button ng-click="$mdOpenMenu()">
          File
        </button>
        <md-menu-content>
          <md-menu-item>
            <md-menu>
              <md-button ng-click="$mdOpenMenu()">New</md-button>
              <md-menu-content>
                <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
              </md-menu-content>
            </md-menu>
          </md-menu-item>
                        <md-menu-item>
            <md-menu>
              <md-button ng-click="$mdOpenMenu()">New</md-button>
              <md-menu-content>
                <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
              </md-menu-content>
            </md-menu>
          </md-menu-item>

        </md-menu-content>
      </md-menu>

    </md-menu-bar>

My existing demo code is at demo.

Actually according to angular material doc, those codes on controller are relevant to the demo. But those are not necessary to use angular material menubar itself. I mean we can ignore those filters, configs & controllers in the demo. — Indranil Mondal, Oct 28 '15 at 15:53
You should stop event propagation on mouseenter on the child menu not on the parent. — Adrien, Jul 28 '16 at 10:25

score 4 · Answer 1 · answered Jan 12 '17 at 13:16

Unfortunately Google is not fixing many of the Angular Material 1 issues, in favor of version 2.
I think this could be a way to encourage people to switch to Angular v2...

Anyway - I have solved the hover issue by stopping the event propagation on the menu item. Then adding a "mouse leave" event handler to the submenu container, that closes the current menu.

Controller -

    $scope.noop = function(event){
        event.stopImmediatePropagation();
    };

    $scope.closeSubMenu = function(event){
        mdMenu.hide();
    }

View -

<md-menu-item ng-repeat="item in menu.items" >
    <md-menu-item>
        <md-menu>
            <md-button ng-click="$mdOpenMenu($event)" ng-mouseenter="noop($event)">{{item.title}}</md-button>
            <md-menu-content ng-mouseleave="closeSubMenu($event)" >
                <md-menu-item ng-repeat="subitem in item.items">
                    <md-button ng-click="$location.url(subitem.location)">{{subitem.title}}</md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>
    </md-menu-item>
</md-menu-item>

Please note that in your controller do you should inform a `$mdMenu` like param and change `mdMenu.hide()` to `$mdMenu.hide()`. — rflmyk, Oct 11 '17 at 11:21

score -2 · Answer 2 · edited Feb 26 '16 at 05:41

it is very simple here is an answer, if you use bower to install angular-material, you need to:

go to /bower-components/angular-material/modules/js folder
open menu.js in any test editor such as visual code, sublime or atom
go to find this line this.handleMenuItemHover = function(event) {

then use my fix:

this.handleMenuItemHover = function(event) {
if (self.isAlreadyOpening) return;
var nestedMenu = (
  event.target.querySelector('md-menu')
    || $mdUtil.getClosest(event.target, 'MD-MENU')
);
openMenuTimeout = $timeout(function() {
  if (nestedMenu) {
    nestedMenu = angular.element(nestedMenu).controller('mdMenu');
  }
  if (self.currentlyOpenMenu && self.currentlyOpenMenu != nestedMenu)    
 {
    var closeTo = self.nestLevel + 1;
    self.currentlyOpenMenu.close(true, { closeTo: closeTo });

    /******* david zhao: fix codes ******/
    if (!!nestedMenu) {
      self.isAlreadyOpening = true;
      nestedMenu.open();
    }

  } else if (nestedMenu && !nestedMenu.isOpen && nestedMenu.open) {
    self.isAlreadyOpening = true;
    nestedMenu.open();
  }
}, nestedMenu ? 100 : 250);
var focusableTarget = 
 event.currentTarget.querySelector('.md-button:not([disabled])');
focusableTarget && focusableTarget.focus();
};

Modifying source code is not acceptable as changes will be overwritten with every package update. — adamdport, Jun 17 '16 at 14:39

Angular material menu opening on mouse hover

2 Answers2