Collection Item state props for focus, disabled, hover, selected, etc

[AndyOGo]

🙋 Feature Request

Im using the dynamic <Item> collection component to render custom JSX for a <ListBox disabledKeys={[...]}> option.

E.g.:

<ListBox items={animals}>{(item) => (
<Item>
  <div classNames={item.disabled ? "" : ""}>{item.name}</div>
  <div classNames={item.disabled ? "" : ""}>{item.describtion}</div>
</Item>
)}</ListBox>

Unfortunately I cant access some state of the rendered item, like disabled, selected, focus, hover, etc.
It would be great to have access to these information, so that I can change the styling for example.

🤔 Expected Behavior

Dynamic <Item> components should have access to all state information.

😯 Current Behavior

Can't access any state in dynamic <Item> components.

💁 Possible Solution

Forward state from useListState

🔦 Context

Can't apply custom styling for options in various states.

💻 Examples

🧢 Your Company/Team

🎁 Tracking Ticket (optional)

[devongovett]

The example in the docs shows how to determine whether an item is disabled or selected. You can also check state.selectionManager.focusedKey === item.key to determine if an item is focused.

Does that answer your question?

[AndyOGo]

Thanks for your quick reply.

No, I think we talk about two different things.
I'm talking about dynamic collections rendered with a render prop and there I want to apply custom styles based on the state.
https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections

E.g.:

<ListBox items={animals}>{(item) => (
<Item>
  <div classNames={item.disabled ? "" : ""}>{item.name}</div>
  <div classNames={item.disabled ? "" : ""}>{item.describtion}</div>
</Item>
)}</ListBox>

[devongovett]

Ah, I see. This isn't really possible as the collection items themselves do not change when these states change. The states are stored at the top-level, not on the items themselves, e.g. ListBox has disabledKeys and selectedKeys. The render prop function is only called if the item data changes.

One way you could handle this would be to map over the items and add an isSelected/isDisabled property yourself. Then pass these items into the listbox instead. This way, the item objects will change when the selection changes, which will trigger a re-render.

let mappedItems = useMemo(
  () =>
    items.map((item) => ({
      ...item,
      isSelected: selectedKeys.has(item.id)
    })),
  [items, selectedKeys]
);

<ListBox items={mappedItems}>
  {item =>
    <Item>
      {item.name + 
        (item.isSelected ? " (selected)" : "")
      }
    </Item>
  }
</ListBox

Here's a full example.

[AndyOGo]

Thank you very much. That should work.
Yeah, I'm using the disabledKeys on the list.

Is it planned to add this feature in the future?

[AndyOGo]

Re-mapping the items if disabledKeys change works for disabled state.

Now I have another case, where I want to auto-focus the first option.
But for this I need the final ListState returned from useListState.

• especially if a filter ListProp is provided

Then I could use an effect if listState.selectManager.isFocused changes and focus the first key by listState.collection.getFirstKeys().

Though remapping items in an effect will cause an infinite render loop.

[snowystinger]

If you're looking for filtering, you should check out the combobox we have in alpha https://react-spectrum.adobe.com/react-spectrum/ComboBox.html and its implementation. https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/combobox/src/ComboBox.tsx which uses the autoFocus strategy as defined here https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/selection/src/useSelectableCollection.ts#L325

[AndyOGo]

@snowystinger @devongovett Thanks a lot for your quick replies.

I use complex options similar to this example, but with a children render prop for dynamic collections
https://react-spectrum.adobe.com/react-aria/useListBox.html#complex-options

I need to adapt the styling for the items, but unfortunately rendered JSX will never update if focus, hover, selected or disabled state changes (I got disabled and selected working with the useMemo trick above).

[snowystinger]

Can you do hover and focus inside the Items themselves? Much like Option in the code sandbox does?

[devongovett]

Here's an alternative implementation. Since you control the Option rendering, you could make the child of the Item also a render prop and call this from within Option.

<ListBox label="Choose an option" selectionMode="single" items={items}>
  {(item) => (
    <Item>
      {({ isSelected }) => item.name + (isSelected ? " (selected)" : "")}
    </Item>
  )}
</ListBox>

https://codesandbox.io/s/proud-tdd-hnzvj?file=/src/App.js

[AndyOGo]

@devongovett
Thanks a lot.
This is what I need and solved my problem.

I don't know if I'm the only one with such a need.
Though maybe it helps to add it to the documentation.

[marcuslindfeldt]

Here's an alternative implementation. Since you control the Option rendering, you could make the child of the Item also a render prop and call this from within Option.

<ListBox label="Choose an option" selectionMode="single" items={items}>
  {(item) => (
    <Item>
      {({ isSelected }) => item.name + (isSelected ? " (selected)" : "")}
    </Item>
  )}
</ListBox>

https://codesandbox.io/s/proud-tdd-hnzvj?file=/src/App.js

This approach worked nicely and I've used it to create a reusable interactive list component with virtualization. E.g.

<InteractiveList
  aria-label="Example List"
  items={items}
>
  {(item) => (
    <Item key={item.id} textValue={item.name}>
      {({ props, ref, isSelected, isPressed, isFocusVisible }) => (<MyCustomListItem ref={ref} {...props} ... />)}
    </Item>
  )}
</InteractiveList>

But unfortunately we get typing errors now with react 18 because they changed the ReactNode type to no longer include functions so it's not possible to pass a render prop into <Item> any longer.
DefinitelyTyped/DefinitelyTyped#60479

[snowystinger]

This is in our docs now
https://react-spectrum.adobe.com/react-aria/ListBox.html#listboxitem-1

I'm not sure about the typescript issue, I haven't been able to reproduce in our own code. If it's still an issue, please share a codesandbox with the issue in the latest release and we can reopen.
Thank you!