react-spectrum
react-spectrum copied to clipboard
Picker in TableView creates a focus trap with arrow key navigation
Provide a general summary of the issue here
- A Picker in a TableView or ListView creates a focus trap when using ArrowLeft for grid navigation.
- ArrowRight will change the value of a Picker even when focus has moved to another cell or element within the grid.
๐ค Expected Behavior?
It should be possible to navigate from a cell containing a Picker to the previous or next cell in the row using ArrowLeft or ArrowRight:
- without focus getting trapped on the Picker.
- without the value of the Picker changing unexpectedly when navigating to a new cell.
๐ฏ Current Behavior
- Focus remains on the Picker when trying to use ArrowLeft to navigate to the previous cell in a row.
- The value of the Picker changes as the focus moves to the next cell using ArrowRight.
๐ Possible Solution
- In
useSelect
, wait a frame, and verify that focus remains on the Picker before changing the value on ArrowRight or ArrowLeft. - In
HiddenSelect
, focusing theinput
should verify that therelatedTarget
is not thetriggerRef.current
, before marshalling focus to thetriggerRef.current
.
๐ฆ Context
No response
๐ฅ๏ธ Steps to Reproduce
https://codesandbox.io/p/sandbox/pedantic-euler-csggfh?file=%2Fsrc%2FApp.tsx
- Open the example app at https://csggfh.csb.app/
- The example app consists of a TableView in which the last row has a Picker in the second cell.
- Press Tab to navigate and set focus to the first row in the TableView.
- Press ArrowDown until the last row, containing the Picker has focus.
- Press ArrowRight to focus the Switch in the first cell.
- Press ArrowRight again to focus the Picker in the second cell.
- Press ArrowLeft to try to move focus to the previous cell in the row.
- Notice that focus remains on the Picker when trying to use ArrowLeft.
- Press ArrowRight to move focus to the next cell, containing the word "Three."
- Notice that the value of the Picker changes as the focus moves to the next cell.
Version
3.34.0
What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Microsoft Edge
If other, please specify.
No response
What operating system are you using?
macOS 14.4 Beta (23E5191e)
๐งข Your Company/Team
Adobe/Accessibility
๐ท Tracking Issue
No response