Skip to content

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

Open
marchbox wants to merge 17 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 17 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
}

if (!increment) {
if (!this.isCombobox && e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

What's the behavior with VoiceOver/Narrator when a key combination is expected to open/close the listbox?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

When the combobox (button) is focused, and the listbox is in closed state, pressing "a", VoiceOver will announce the menuitem since it instantly gains focus. Tested in VoiceOver, it announces in the same way as the APG’s example.

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

2 participants