Keyboard navigation

[Saulis]

Features / Behavior:

• Let's focus on desktop behavior, if it works on fullscreen, great - if not then not.
• Input can be focused using TAB
• Popup opens when you start typing on it (or click the icon)
• Popup opens when focused and you push DOWN/UP
• If a value is selected when popup opens, it's highlighted, otherwise nothing is highlighted. Selected item is not highlighted after filtering anymore.
• After typing in a filter, the topmost item is highlighted
• Focus/highlight is moved up and down by pushing DOWN/UP
• When you navigate to the topmost item, and push one more time UP, the topmost item stays focused??
• You need to be able to navigate the value inside the input field using LEFT/RIGHT
• Pushing ENTER will select the focused/highlighted item
• When the input box is cleared and ENTER is pushed, combobox value is cleared.
  • Q: How is the input box cleared ? A: With BACKSPACE
  • Q: When input box is empty is it cleared ? A: combobox.value is cleared if ENTER is
    hit when input box is empty/cleared
  • Additional info: when input value is changed, the items are reset and item highlight is removed.
• When the input box is cleared we don't want to highlight the topmost item
• Pushing SPACEBAR is for now reserved for multi selection
• Pushing ESCAPE will cancel and close the popup

Design questions:

• When you navigate to the topmost item, and push one more time UP, the topmost item stays focused? or should it remove focus

[Saulis]

One feature missing from our list is that the list of items should of course scroll when it's navigated down or up. I think that we need to implement that in #22 though.

[Saulis]

@JouniK @tuomasnironen have we discussed if the overlay should be modal or not?

If not, then we can set allowOutsideScroll true in <iron-dropdown> to receive arrow down and up events correctly. Otherwise we need to have a monkey patch to hack into the dropdown scrolling manager.

[Saulis]

While discussing with Tuomas, I tested with allowOutsideScroll = true and the end result was quite unacceptable; the page does scroll but the overlay has fixed position and it detaches from the input field and starts hovering down the page following the scrolling actions.