adobe / adobe/react-spectrum

Make ListBox filter directly overridable

Open
#8,084 10 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.