Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
petdud opened this issue Dec 31, 2024 · 1 comment
Open
2 tasks done

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

petdud opened this issue Dec 31, 2024 · 1 comment

Comments

@petdud
Copy link
Contributor

petdud commented Dec 31, 2024

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.
@Hotell
Copy link
Contributor

Hotell commented Jan 2, 2025

I'm not the SME on dropdown a11y, but AFAIR the behaviour you're describing works as expected. the keyboard navigation for selecting value should be SPACEBAR or ENTER not TAB press, I defer the decision/further discussion to authors though

cc @ling1726 @bsunderhus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants