menu up/down arrow does not navigate the overlay

[alexw10]

Bug, feature request, or proposal:

Menu does not properly navigate with up/down arrows, also enter key does not work since you can't navigate with the up/down.
This work's just fine in autocomplete cause it is handling the up/down/enter key but this must have just been missed in menu.

What is the expected behavior?

Should be able to open a menu and click down arrow to the first element, second and than go back up to the first for example.

What is the current behavior?

Current behavior is up/down arrow will actually scroll the page.

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: https://goo.gl/DlHd6U
https://material.angular.io/components/component/menu

Can do it with the basic menu example above.

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

Users should be able to navigate the menu via keyboard.

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

Latest in Material2

Is there anything else we should know?

I would be glad to make the code updates for you guys let me know.

[kara]

Some background: We originally designed it so that the first menu item will focus when the menu opens, but only if you navigate to the menu with the keyboard. So if you tab to the menu and hit enter to open it, you should see the menu items switch focus as you navigate with the arrow keys. However, if you use the mouse to open the menu, we don't focus the first item so that none of the menu items are initially highlighted (which is what the spec requires visually).

This implementation is confusing because all we really care about is that the initial appearance is different between the two input types. The arrow keys should always work to move the focus, so we should fix that.

[alexw10]

Ah, I see what you are saying Kara what you described does indeed work.
I definetly agree this is very confusing especially since other components such as auto complete work right away by just using the up/down arrow keys for example.

Are you okay with me giving this a go?
I would pretty much just look at how autocomplete does it and apply the same type of thing to menu.

[kara]

Sure, give it a go. Just keep in mind that the actual implementation will need to be distinct from the autocomplete because they have different accessibility needs. While the focus should never leave the input in an autocomplete (it just appears to focus the list items and uses active-descendant instead), menu items will need to get real focus.

[alexw10]

@kara @crisbeto Sorry I wasn't able to get to this, looks like Cris has something in the works.
Let me know if I can be of any help or if you need anything finished up with this I would be happy to take a look

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}