Provide possibility to handle hovered and highlighted state separately
jaseeva opened this issue · comments
Summary:
separate highlighted and hovered state, to give the possibility to treat them differently (in terms of functionality or style) and to avoid the bug with unintentional suggestion selection.
Bug details: (reproducible on the basic example)
- focus on the input field
- type 'c'
- hover on one of suggestions (but don't click it)
- press Enter
Result: the hovered suggestion is selected
Expected: if suggestion was only hovered (and not intentionally selected), submit should use only the value from input field
Suggested changes:
when user hovered the suggestion, don't mark it as highlighted, but mark as hovered instead. API can provide a separate method for onSuggestionHovered (which could default to onSuggestionHighlighted for backwards compatibility). If user clicked the suggestion, it will be selected (as in current implementation).
This will not only fix the bug with unintentional selection, as described above, but also provide wider possibilities for customisation.
For example, it's already done in the search field in Google Chrome: you can see the different color for suggestion selected with keyboard (upper one) vs. the hovered suggestion (lower one)
The problem is especially bad if the suggestion list is long, causing a scrollbar, and user steps the list down with arrow key. After scrolling, a random item under mouse pointer becomes highlighted (and possibly selected with enter key).