Is it possible to use a grid list instead of list box inside a select?

[bilduong]

Hi,

I tried to use a grid list (https://react-spectrum.adobe.com/react-aria/useGridList.html) instead of a list box (https://react-spectrum.adobe.com/react-aria/useListBox.html) for a select (https://react-spectrum.adobe.com/react-aria/useSelect.html).

Reasons / Background

I wanted to provide additional information for each option (e.g. with a "more details" tooltip/button).

Problems Encountered

When opening the select via keyboard input, the focus does not transfer to the grid list. When inputing another "down" the select popover just closes.

After selecting one option with the mouse, it's possible to interact with the grid list as expected. Even reopening the select via keyboard will now transfer the focus correctly.

Question

Am I doing something wrong? Is what I'm intending to do possible with react-aria? Is this a potential react-aria bug / issue?

Kinda related additional question: Are there any examples of rewriting the focus / keyboard input logic to custom features?

Code Example

https://codesandbox.io/s/amazing-frost-q6kjk3?file=/src/App.js

I used the following code snippet to test the active focus:

document.addEventListener('focusin', function() {
  console.log('focused: ', document.activeElement)
}, true);

https://hidde.blog/console-logging-the-focused-element-as-it-changes/

[bilduong]

I think I found a workaround / fix for this use case. By adding a FocusScope with autoFocus (https://react-spectrum.adobe.com/react-aria/FocusScope.html) around the GridList (specifically the ul Element), the focus will transfer as intended and everything works like a charm.

I'll still need to do some device testing, but this seems promising.

Code Example with "Workaround"

https://codesandbox.io/s/blissful-glade-0h5d56?file=/src/App.js