Is it possible to use a GridList inside a Select?

[2Pacalypse-]

So I wanted to create a standard Select component and when I use ListBox inside it for items everything works. However, if I swap out ListBox for GridList (because I wanted to have an interactive button inside each row), things don't work anymore.

You can take a look at an example here: https://codesandbox.io/p/sandbox/rac-forked-q9nr3y

I took an example from your documentation and literally changed these 3 things:

• Replaced ListBox with GridList
• Replaced ListBoxItem with GridListItem
• Added selectionMode="single" and selectionBehavior="replace" props to GridList

Am I doing something wrong, or is this simply not a use case for Grid Lists?

Bonus question: Are there plans on making <Autocomplete> work with GridList as well?

[snowystinger]

With Select, no, that only works with ListBox at the moment. If it worked with GridList, then you'd see that context listed here https://react-spectrum.adobe.com/react-aria/Select.html#listbox

I do not know if we'll expand it to that, there's a lot of conflicting keyboard behaviours. I'm not sure if/when we'll expand Autocomplete to cover GridList as well, again, there's interaction conflicts. We've talked about wanting to support Autocomplete with all Collection based components, so I imagine we'll spend more time looking into it at the very least.

One interaction conflict is arrow keys. Focus is managed by the Autocomplete to navigate the filtered collection virtually. Users need to be able to use left/right to move the cursor in the text, but left/right would also move focus left/right in a gridlist through any cells/focusable elements. It's unclear how we'd make both of those accessible to users.