How to make keyboard navigation support wrap around?

[joshua7v]

some collection components are built upon Collection interface / comopnents from react-stately
thus they could support keyboard navigation very easily.

What if I want a slightly different keyboard navigation behavior,
like wrapping around to the first item when pressing next on the last one?
Is there a way to achieve that?

[LFDanLu]

A bunch of the collection specific react aria hooks (useComboBox, useSelectableList, etc) use useSelectableCollection which supports the shouldFocusWrap option which will allow focus to go to the first/last item if you hit the bottom/top of your collection. useSelectableList supports that prop as well which useMenu, useListBox etc use as well. Note some of those higher level hooks may not propagate shouldFocusWrap at the moment however.

[joshua7v]

Thanks for the quick answer, looks like its exactly what I want.

However, as a first-day react-aria user, I couldn't find the docs about useSelectableList anywhere,
Yes, the shouldFocusWrap links to the source code, that could help. But am I missing anything here?
I searched within sites below:
https://react-spectrum.adobe.com/react-aria/useSelect.html
https://react-spectrum.adobe.com/react-stately/collections.html

and none of them mentioned the hooks you provided.

The question comes from me looking around the useSelect hook, just trying to think about if its suitable for my usecase.

[LFDanLu]

useSelectableList is usually wrapped by other hooks like useGridList and useListBox so it is more of an internal hook, hence why there aren't docs for it. Since you are trying to make a select component, you can pass shouldFocusWrap to your ListBox implementation like so: https://codesandbox.io/s/xenodochial-bardeen-y25b2v?file=/src/Select.tsx:2293-2360.

I realize this is fairly non-obvious since it is a change applied on a component used by the select component, maybe we can call out some of these customization options in the documentation