Skip to content

[Bug]: Dropdown doesn't keep selection when exiting via tab key #33535

@petdud

Description

@petdud

Component

Dropdown

Package version

9.13.15

React version

18.3.1

Environment

Fluent doc site storybook Dropdown

Current 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

  1. Go to any storybook of Dropdown component in fluent doc, for example this default: https://react.fluentui.dev/?path=/docs/components-dropdown--docs#default
  2. Open dropdown menu
  3. Focus on any of the available items
  4. 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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions