Skip to content

[Bug]: Combobox on Table: Down Arrow closes popover on input instead of focusing first option #35520

@bsunderhus

Description

@bsunderhus

Component

Table
Combobox

Package version

9.72.7

React version

18.3.1

Environment

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  npmPackages:
    @fluentui/react-components: ^9.0.0 => 9.72.7 
    @fluentui/react-icons: latest => 2.0.315 
    @types/react: ^17 => 17.0.90 
    @types/react-dom: ^17 => 17.0.26 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1

Current Behavior

While doing keyboard navigation, there's a case in the Combobox where it gets opened but none of its options are "selected", for example if you try to write on the Combobox input some value that does not correspond to any option

Image

Once you're in this state and you press down arrow, the combobox popover will be closed an focus will go to the next cell in the grid

Image

Expected Behavior

The focus should go to first option

Reproduction

On DataGrid: https://stackblitz.com/edit/pei8dmhp?file=src%2Fexample.tsx
On Table: https://stackblitz.com/edit/hdewaf52?file=src%2Fexample.tsx

Steps to reproduce

  1. focus on the combobox
  2. write something that does not exist in the options
    • this will open the combobox without having the focus on any option
  3. press arrow down to try to navigate through the options
  4. notice that the focus goes to the next cell right underneath, instead of to the options

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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