Can't access ListBoxContext in child of ListBox

[jaslong]

Hello, we're using react-aria-components, specifically the ListBox. We want to have a wrapper around a ListBoxItem, but found that we weren't able to access any contexts that should have been provided by ListBox, such as ListBoxContext or ListStateContext. I was able to verify that the ListBox rendered the contexts, by stepping through the code and also checking the React component tree. However, child elements were not able to access the contexts. Is this expected?

Or am I supposed to wrap the ListBox with my own instance of ListBoxContext.Provider? I noticed in ListBox.test.js it could be used both ways.

Note I also tried it for some other components such as Select, and the SelectContext is available to child elements.

I have a minimal reproduction here: https://github.com/plasmicapp/react-aria-components-test

[devongovett]

Linking to my answer from a previous discussion on this: #6596 (comment)

What are you needing off of the state in your item component? One thing that does work, is to split the component in two, like this:

function MyListBoxItem(props) {
  return (
    <RACListBoxItem {...props}>
      <MyListBoxItemInner {...props} />
    <RACListBoxItem>
  );
}

function MyListBoxItemInner(props) {
  let ctx = useContext(ListBoxContext);
  // do whatever
}

This works because the children of MyListBoxItem are rendered lazily, only after the initial collection is constructed during the first render. At that point the state is readable.

[jaslong]

Thanks, that did it.

But follow up question on this--in MyListBoxItem, the context reads on first render as null. Why doesn't MyListBoxItem re-render after the collection is initialized, which should presumably trigger a context change?