Skip to content

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

Merged
marchbox merged 19 commits into
microsoft:masterfrom
marchbox:users/machi/dropdown-typeahead
Jun 2, 2026
Merged

feat(web-components): add keyboard support for printable characters in Dropdown#36232
marchbox merged 19 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

@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
Comment thread packages/web-components/src/dropdown/dropdown.base.ts
Comment thread packages/web-components/src/dropdown/dropdown.base.ts Outdated
Comment thread packages/web-components/src/dropdown/dropdown.spec.ts Outdated
Comment thread packages/web-components/src/dropdown/dropdown.spec.ts Outdated
@marchbox marchbox requested a review from radium-v May 27, 2026 18:25
@marchbox marchbox force-pushed the users/machi/dropdown-typeahead branch from bc03e45 to aebd883 Compare May 27, 2026 22:21
Comment thread packages/web-components/src/dropdown/dropdown.base.ts
@radium-v radium-v self-requested a review June 2, 2026 22:14
@marchbox marchbox merged commit f14249d into microsoft:master Jun 2, 2026
13 checks passed
@marchbox marchbox deleted the users/machi/dropdown-typeahead branch June 2, 2026 22:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

[Bug]: Select items with keystrokes

3 participants