[Menu] Improve hover/select/focus UI display

[rosskevin]

Problem description

After initial open of menu, first item remains highlighted even after hovering off.

Steps to reproduce

next branch, menus demo http://localhost:3000/#/component-demos/menus

1. click to open
2. hover to a lower item

Versions

next branch a38068f

• Browser: Mac Chrome 52.0.2743.116
• Browser: Mac Firefox 48.0.2
• Browser: Mac Safari 9.1.2

Images

[ArcanisCz]

@oliviertassinari Hi, sorry to be inactive for awhile!

Moving discussion from closed PR

I am not sure i understand Nathan...

Problem is with hover and different expexcted UX for touch and mouse devices. This way, when you open menu with something selected (first item is selected by default, but lets put this aside now), this remain selected until you click/touch another option. Alternatively, you can move your selected item with keyboard arrows.

Selected item has grey background. Hovered items also have grey background. So visually, you have 2 selected items when you move your mouse inside Menu (1 selected, 1 by hover). What should mouse hovering signify?

1. my proposal in rejected PR was to tie together hover and select states, which is quite radical solution. But it solves this dichotomy.
2. Both states could have different background color, and we will delete preselecting first option (keyboard actions with menu open will activate that though). This will solve problem with user perceiving 2 selected options.

Should i implement that 2) option?

[oliviertassinari]

@ArcanisCz I have been doing some benchmark, it's even worse than that. We have 3 possibles state. The focus, selected, and hover. You can have all of them at the same time:

Also, we should also consider where is the original focus, we focus the selected item or the first one

• The native select input on chrome tie together the hover and select state but have a different style for the selected one:
  

The selected item is focused by default, otherwise, the first one.

• react-bootstrap dropdown use different styles
  
  The button is focused by default

[oliviertassinari]

I think that the best option is to keep the default focus behavior and to change the style of the three possible different states. I like the react-bootstrap solution (same as bootrap@4-alpha).