You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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.
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.
Provide a general summary of the feature here
In
react-stately
inuseListData
, there is afilter
prop that's accepted. Anystate.item
s that are passed in get iterated over, running them through the user's filter. However, if any of thestate.item
s haschildren
, 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
inListBox
and filter them before passing them into theuseListState
at all.i
returns "I hate animals" andaus
returns "Australian" and its children.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 foroptgroup
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
The text was updated successfully, but these errors were encountered: