adobe / adobe/react-spectrum

useListData should filter on items in sections as well

Open
#4,930 1 comment 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.