tbleckert / react-select-search

⚡️ Lightweight select component for React
https://react-select-search.com
MIT License
676 stars 147 forks source link

When an item is selected, should it be the base for keyboard navigation? #95

Open vvo opened 4 years ago

vvo commented 4 years ago

On this example: https://react-select-search.com/?path=/story/single-select--search

When an item is selected, if you reopen the menu and try to navigate, the selection starts from 0, instead of the currently selected item.

Example: Kapture 2020-06-30 at 11 29 03

Let me know what you think!

If we ever change this, we should also take into account the case where the currently selected element is no more part of the list given the search term.

If we dot this, it also means that the default highlighted would be the currently selected item or the first item if no selected item/selected item is not part of the list given search term.

tbleckert commented 4 years ago

Hm yeah, good point. When I added the keyboard support I tried to mimic the behavior of the default browser select box. Also hard with the multi select.

I personally like the current behavior because the focus starts at the input field and moves on to the next element. But I can also see how one might feel lost when it jumps away from the selected item. Yeah, might be a good idea to change this.

What do you think?

Considering your notes, it would be something like this:

  1. Set highlighted to the selected item if it's in the current options list.
  2. Start from zero if no selected item or the selected item is not in the current options list.
  3. Start from zero if multiple selected? (since we currently don't scroll on focus on multi select)
vvo commented 4 years ago

Considering your notes, it would be something like this:

  1. Set highlighted to the selected item if it's in the current options list.
  2. Start from zero if no selected item or the selected item is not in the current options list.
  3. Start from zero if multiple selected? (since we currently don't scroll on focus on multi select)

This is a good proposal, yep!

Honason commented 4 years ago

Better handling of the initial keyboard navigation would be great :-)

If I can add another suggestion: When you open the options list and hover over an item with mouse, then navigate with keyboard, the starting point should be the hovered item.