How do I delegate focus and keyboard navigation to the first items of a nested list in grid lists ?

[maximeoger]

Hello,

I use the useGridList hook to handle nested list object that renders a sub list of items in a recursive way.

When I navigate with the mouse, everything works as expected, but when I use the keyboard navigation, an error occurs :

Cannot read properties of null (reading 'focus')

I think this is because the focus does not persist on the sub list items. Is there some kind of way to interrupt the keyboard navigation in the main list and move it to the sub list ?

Here is a working example

[snowystinger]

From a quick peek at what you're doing, it looks similar to submenus. Have you had a look through our Submenu implementation in React Spectrum? https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/menu/src/SubmenuTrigger.tsx that may shed some light on what's going on for you.