Bug(menu): Cannot read property 'disabled' of undefined

[holo-michael-simarta]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Should not cause an exception

What is the current behavior?

Causes an exception:
Cannot read property 'disabled' of undefined in the following function:

ListKeyManager.prototype._setActiveInWrapMode = function (delta, items) {
    // when active item would leave menu, wrap to beginning or end
    this._activeItemIndex =
        (this._activeItemIndex + delta + items.length) % items.length;
    // skip all disabled menu items recursively until an enabled one is reached
    if (items[this._activeItemIndex].disabled) {
        this._setActiveInWrapMode(delta, items);
    }
    else {
        this.setActiveItem(this._activeItemIndex);
    }
};

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd

https://material.angular.io/components/component/menu
focus on a menu item then use an arrow key

What is the use-case or motivation for changing an existing behavior?

Need to implement keyboard navigation to go through a menu

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.4.5
Material 2.0.0-beta.2
Windows 10

Chrome Version 56.0.2924.87 (64-bit)
Microsoft Edge 38.14393.0.0
Microsoft EdgeHTML 14.14393

Is there anything else we should know?

[dahaupt]

@userexperiences I can't reproduce this (tested in Google Chrome and Microsoft Edge). Can you provide more information?

[kara]

Yeah, I'm not able to get the error either. More information to repro?

[holo-michael-simarta]

Sorry, it's just the up and down arrow keys, make sure the menu is still open and an item is in focus.

[HumanMedia]

Yes I can reproduce. One step has been left out.

• Reload the page
• Pop the menu open
• Mousedown on a menu item then without mousing-up, drag the cursor off the menu, then mouseup
• Use up and down cursor keys
• TypeError: Unable to get property 'disabled' of undefined or null reference

[leocaseiro]

I thought the <md-menu> and the <md-select> were sharing the same html. As it doesn't happen with <md-select>.

[leocaseiro]

Sorry @kara, I was wondering why mouse users could not see the focus on click or not navigate with keys.
I normally click on a menu, then, I use keys to navigate.

PS: If we remove the condition, the menu works nice on mouse click and it seems to fix this issue.

Update: On Menu AngularJS the behaviour is open on click, then focus by default.

[dahaupt]

@leocaseiro Removing the condition fixes the problem, but the behavior is not perfect because the first focused element will stay active if the mouse hovers over another item. In material1 it works nice, you are right.

[crisbeto]

I ran into this while working on another issue. The problem is that we have a check for null a little bit down, but the _activeItemIndex is undefined by default. I've fixed it here, but I'll backport it since it's a quick fix and the other PR may take longer to go through.