useListBox items missing in a virtualized gallery with a justified layout

[lrozanski]

Hey all,

To describe my somewhat unusual use case - I'm trying to create a virtualized gallery (using Tanstack) with a justified layout (i.e. something like this).

This means the virtualizer contains rows (which are divs), which then contain items. The layout being as follows scroll container -> row[] -> item[] due to the fact that each row can have a variable number of items. Because of this, I can't really use ListBox and ListBoxItem from react-aria-components, because if I understand correctly, ListBoxItems must be children of ListBox, and not descendants.

This doesn't support my use case, so I tried to use useListBox, useOption and useListState (from react-stately). I think I have done this correctly, but listState.collection is always empty and keyboard navigation/focus doesn't work (clicking on an item works, but then arrow keys do nothing).

I managed to reproduce the issue in this example: https://codesandbox.io/p/sandbox/lv43nc

I've been scratching my head trying to figure this out for a while now, and I would be very grateful if anyone could tell me what the issue here is 😄 Am I doing something wrong, or is this a bug?

[snowystinger]

This sounds like you actually want grid list.

We're working on updating docs and adding some features. feat: Add WaterfallLayout to RAC, and update GridLayout

This PR adds Waterfall, but doesn't add Gallery layout, however, you could create your own Gallery Layout. You could use our react spectrum one for inspiration, https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/card/src/GalleryLayout.tsx this was built to work with some older code, so I doubt it would work straight out of the box, but you could probably adapt it following how the Waterfall layout works.