Reputation: 385
Working with angular-material design, found a bug... On md-menu, if you have a sub menu item (as you can see in the image)and you open the subMenu and then hover over the non-subMenu item (menu item) it throws the error "Cannot read property 'open' of null" and remains highlighted even after hovering over a different menu items and need a click to open sub-menu-item.
code:
<md-menu>
<button ng-click="$mdOpenMenu()">menu</button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="---">menu item</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-menu>
<md-button ng-click="$mdOpenMenu()">sub menu</md-button>
<md-menu-content>
<md-menu-item><md-button ng-click="---">sub menu item</md-button></md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
</md-menu-content>
</md-menu>
]2
Upvotes: 1
Views: 2481
Reputation: 259
You copied the sample from the docs. These samples does not work.
<md-menu>
<md-button ng-click="openMenu($mdOpenMenu, $event)">MENU</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="---">sub menu item</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
And in your controller:
var originatorEv;
scope.openMenu = function ($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
Upvotes: 1