fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

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

Open bsunderhus opened this issue 1 month ago • 2 comments

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

  • [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [x] The provided reproduction is a minimal reproducible example of the bug.

bsunderhus avatar Nov 26 '25 09:11 bsunderhus

Steps for investigating this issue:

  1. create integration test on react-table to verify the use case
  2. figure out if this is a tabster issue and if so investigate how to prioritize Combobox instead of Table on the navigation
  3. figure out how can the Table component be aware that there's an open Combobox and that focus should be handled by it
    • probably some share context?
  4. propose a solution

bsunderhus avatar Nov 26 '25 13:11 bsunderhus

@mshoho, I'll reopen this issue to ensure we follow up with upgrading tabster version before closing it!

bsunderhus avatar Dec 09 '25 11:12 bsunderhus