Skip to content

feat(web-components): add keyboard support for printable characters in Dropdown#36232

Open
marchbox wants to merge 7 commits into
microsoft:masterfrom
marchbox:users/machi/dropdown-typeahead
Open

feat(web-components): add keyboard support for printable characters in Dropdown#36232
marchbox wants to merge 7 commits into
microsoft:masterfrom
marchbox:users/machi/dropdown-typeahead

Conversation

@marchbox
Copy link
Copy Markdown
Contributor

@marchbox marchbox commented May 19, 2026

Previous Behavior

In Dropdown, when type="dropdown", typing doesn’t move active descendant to an option whose label text starts with the user typed content.

New Behavior

When Dropdown has the focus:

  • First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character.
  • If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string.
  • If the same character is typed in succession, visual focus cycles among the options starting with that character.

This behavior matches the native <select>, ARIA Authoring Practices Guide, and Fluent React Dropdown.

Related Issue(s)

Fixes #36122

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 19, 2026

📊 Bundle size report

✅ No changes found

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown

@github-actions github-actions Bot May 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-web-components/Accordion 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Accordion. - Dark Mode.normal.chromium_1.png 3154 Changed
vr-tests-web-components/RadioGroup 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/RadioGroup. - Dark Mode.1st selected.chromium_2.png 119 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

@marchbox marchbox marked this pull request as ready for review May 19, 2026 23:58
@marchbox marchbox requested a review from a team as a code owner May 19, 2026 23:58
@marchbox marchbox changed the title feat(web-components): support type ahead in Dropdown feat(web-components): add keyboard support for printable characters in Dropdown May 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

[Bug]: Select items with keystrokes

1 participant