Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide possibility to handle hovered and highlighted state separately #784

Open
jaseeva opened this issue Jan 4, 2021 · 1 comment
Open

Comments

@jaseeva
Copy link

jaseeva commented Jan 4, 2021

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)
image

@vesameskanen
Copy link

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants