useListData should filter on items in sections as well

[cssinate]

Provide a general summary of the feature here

In react-stately in useListData, there is a filter prop that's accepted. Any state.items that are passed in get iterated over, running them through the user's filter. However, if any of the state.items has children, nothing is done to filter those children. The filter function should also iterate over any children and return them under their section if they match the filter.

🤔 Expected Behavior?

In the Examples section below, I've included a link to a CodeSandbox.

I would expect that if I type in aus into the input, that the entirety of the "Australian" section would be displayed. This is already happening.

If I type i I would expect to see both the individual item "I hate animals" as well as the "South American" heading with only "Iguanas" underneath.

😯 Current Behavior

Again, using the Examples below, typing koa (to try to find Koala) yields no results in the filtered list.

💁 Possible Solution

My workaround was to intercept the incoming props.items in ListBox and filter them before passing them into the useListState at all.

1. If the search matched the item (regardless if it had children or not), I returned the item, and moved to the next item. This handled both the case where i returns "I hate animals" and aus returns "Australian" and its children.
2. Else if the item had children, I replaced its children with a filtered list of children that matched the search. If the new children list had a length, then I returned the item with its new children. This would handle i returning the "South American" section with "Iguana" under it.

In my opinion, the above logic should be applied in useListData.

🔦 Context

Our Select component needed to allow for the ability to multiselect items and remove individual selected items. https://codesandbox.io/s/sleepy-keller-qjygke was a decent example of that functionality.

However, since the native HTML <select> element also allows for optgroup we thought it was a good idea to add the functionality for sections in the ListBox in addition to the multiselect.

💻 Examples

https://codesandbox.io/s/reverent-williams-d3z2gw?file=/src/App.tsx

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue, this seems reasonable. It appears that filter is only run on the top level, the children are never passed to the filter. You could determine if you should keep a section, but currently if you keep a section it looks like it'd keep the entire section.