useListData should filter on items in sections as well
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the feature here
In `react-stately` in `useListData`, there is a `filter` prop that's accepted. Any `state.item`s that are passed in get iterated over, running them through the user's filter. However, if any of the `state.item`s 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 `` 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_
Contributor guide
Assessment
This issue has not been assessed yet.