rio-labs/rio

`Dropdown` Settings for Component Examples Searchable but Not Selectable via Keyboard

Closed this issue · 3 comments

Describe the bug

The Dropdown settings for component examples are searchable, but the search results cannot be selected using the keyboard.

Experienced Behavior

  • The search result is found and displayed.
  • The search result is not selectable using the keyboard.

Expected Behavior

  • The search result should be findable.
  • The search result should be selectable using the keyboard. (e.g. pressing Enter or Tab)

Steps to Reproduce

  1. Navigate to a component example page with Dropdown settings.
  2. Click into a search setting.
  3. Search for any entry using the keyboard.

Screenshots/Videos

image

Operating System

Windows, MacOS

What browsers are you seeing the problem on?

Chrome, Safari, Edge

Browser version

No response

What device are you using?

Desktop, Mobile

Additional context

No response

Funny, I have the exact opposite issue. I can select, but not filter 😄

Ah perfect!

You might hate me for this^^
Imagine you have three options: ["Option 1", "Option 2", "Option 3"]. When you type "option", the whitespace will be visually removed, resulting in ["Option1", "Option2", "Option3"]. Additionally, all three options should be highlighted.

Dropdown.whitespace.mp4

The issue is fixed. If the problem occurs on different browsers, please reopen the issue.