Make ListBox filter directly overridable
- 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
It would be nice if the filtering [here](https://github.com/adobe/react-spectrum/blob/b0118e99853f9785e930fbc3e01f47ce5c43ff79/packages/react-aria-components/src/ListBox.tsx#L121) could be override directly on the `ListBox` declaratively. Like
```tsx
// No filtering at all
// Custom filter
customFilter(item, input)} />
```
Right now, to achieve custom filtering, you need to setup the combox as a controlled component: https://react-spectrum.adobe.com/react-aria/useComboBox.html#custom-filtering
And then repeat the items you want in the context on both the Listbox and Combox. This introduces local state where you don't _need_ to have it.
I'd be happy to make the PR if the team is okay with it
Alternatively, I can also see a solution where the `filter` is overridable on Combobox itself.
```ts
customFilter(item, input)} />
```
Another solution that I would enjoy seeing, would be enabling this pattern:
```tsx
// Inside Combobox > Listbox > ListboxSection >
contains(o.value, use(ComboBoxStateContext)?.inputValue ?? '') ||
contains(o.label, use(ComboBoxStateContext)?.inputValue ?? ''),
)}
```
This work require being able to simply toggle the filtering on/off.
### 🤔 Expected Behavior?
Custom filtering on Comboboxes should not require local state
### 😯 Current Behavior
Custom filtering on Comboboxes requires local state
### 💁 Possible Solution
All a `filter` prop on `Listbox` OR on components that provide the filter currently (e.g. `Combobox`)
### 🔦 Context
I had to introduce local state because I wanted the filtering to react to the aria-label _and_ some invisible metadata. I felt as though I was breaking a pattern by introducing local state.
### 💻 Examples
_No response_
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start at packages/react-aria-components/src/ListBox.tsx around the linked filtering logic, then compare it with the useComboBox custom-filtering guidance. Resolve whether filtering belongs on ListBox, Combobox, or Collection, and confirm that the chosen API supports disabling or customizing filtering without controlled local state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100