react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Picker in TableView creates a focus trap with arrow key navigation

Open majornista opened this issue 4 months ago โ€ข 0 comments

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:

  1. without focus getting trapped on the Picker.
  2. without the value of the Picker changing unexpectedly when navigating to a new cell.

๐Ÿ˜ฏ Current Behavior

  1. Focus remains on the Picker when trying to use ArrowLeft to navigate to the previous cell in a row.
  2. The value of the Picker changes as the focus moves to the next cell using ArrowRight.

๐Ÿ’ Possible Solution

  1. In useSelect, wait a frame, and verify that focus remains on the Picker before changing the value on ArrowRight or ArrowLeft.
  2. In HiddenSelect, focusing the input should verify that the relatedTarget is not the triggerRef.current, before marshalling focus to the triggerRef.current.

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

https://codesandbox.io/p/sandbox/pedantic-euler-csggfh?file=%2Fsrc%2FApp.tsx

  1. Open the example app at https://csggfh.csb.app/
  2. The example app consists of a TableView in which the last row has a Picker in the second cell.
  3. Press Tab to navigate and set focus to the first row in the TableView.
  4. Press ArrowDown until the last row, containing the Picker has focus.
  5. Press ArrowRight to focus the Switch in the first cell.
  6. Press ArrowRight again to focus the Picker in the second cell.
  7. Press ArrowLeft to try to move focus to the previous cell in the row.
  8. Notice that focus remains on the Picker when trying to use ArrowLeft.
  9. Press ArrowRight to move focus to the next cell, containing the word "Three."
  10. 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

majornista avatar Feb 14 '24 23:02 majornista