Add keyboard navigation

[laliq]

Resolves #1901

[laliq]

I detect one 🐛

1. When using arrows to focus the menu.item, the menu detaches itself from default position.

[oddvernes]

Actually, there is something quite funky going on, and I think pressing enter on the menu item does not count as a click after all. Going to the menu stories, onClick inside menuItem never registers anything when pressing enter (as opposed to clicking with mouse pinter), but console.log(new Error()) in the closeMenu function claims it was triggered by onClick on the anchor element button. I am a little bit confused. Suggest @mimarz also takes a look

[laliq]

Actually, there is something quite funky going on...

Yes i agree @oddvernes, and i'm a bit confuse too... Any way i will continue to fix this bug.

[oddvernes]

Maybe it should be its own ticket if the problem is deeper in the menu itself. And put this pr aside until it if fixed

[mimarz]

Actually, there is something quite funky going on, and I think pressing enter on the menu item does not count as a click after all. Going to the menu stories, onClick inside menuItem never registers anything when pressing enter (as opposed to clicking with mouse pinter), but console.log(new Error()) in the closeMenu function claims it was triggered by onClick on the anchor element button. I am a little bit confused. Suggest @mimarz also takes a look

I am observing the same.

• MenuItem.onClick is only triggered by pressing "space" key.
• Anchor element (button) onClick is triggered when MenuItem is focused and key press.
  • Adding preventDefault to MenuList handleKeyPress stops this bubbling
• This behaviour is probably a side-effect of trying to focus anchor element after Menu closes. Removing the globalKeyPress for Enter "fixes" this behaviour.

As @oddvernes suggested, we need an issue to fix this bug in Menu :)

Edit: Bug-fix issue #1910

[oddvernes]

LGTM 👍

[mimarz]

LGTM 👍