-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Description
Component
Dropdown
Package version
9.13.15
React version
18.3.1
Environment
Fluent doc site storybook DropdownCurrent Behavior
Scenario: Open Dropdown menu, focus on one of the items and press "Tab" key.
It closes the dropdown menu without selecting the focused option and move to the next focusable element.
Expected Behavior
When pressing the Tab key, it should select the focused option, close the dropdown menu and move to the next element.
Details:
In Combobox it works exactly like this, but in Dropdown the current behaviour doesn't select the option.
The only exception when it works in Dropdown is the Clearable dropdown - but still you need to select first an option and then when clearable button is visible, pressing the "Tab" key on focused option will work correctly.
Reproduction
https://stackblitz.com/run?file=src%2Fexample.tsx
Steps to reproduce
- Go to any storybook of Dropdown component in fluent doc, for example this default: https://react.fluentui.dev/?path=/docs/components-dropdown--docs#default
- Open dropdown menu
- Focus on any of the available items
- Press "Tab" key
Current: Pressing tab key doesn't select the focused option
Expected: Pressing tab key selects the focused option
Are you reporting an Accessibility issue?
yes
Suggested severity
Medium - Has workaround
Products/sites affected
all dropdown components
Are you willing to submit a PR to fix?
no
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.