[Bug]: Combobox on Table: Down Arrow closes popover on input instead of focusing first option
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
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
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
- focus on the combobox
- write something that does not exist in the options
- this will open the combobox without having the focus on any option
- press arrow down to try to navigate through the options
- 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.
Steps for investigating this issue:
- create integration test on
react-tableto verify the use case - figure out if this is a
tabsterissue and if so investigate how to prioritize Combobox instead of Table on the navigation - 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?
- propose a solution
@mshoho, I'll reopen this issue to ensure we follow up with upgrading tabster version before closing it!