Make ListBox filter directly overridable

[vezaynk]

Provide a general summary of the feature here

It would be nice if the filtering here could be override directly on the ListBox declaratively. Like

// No filtering at all
<ListBox filter={null} />
// Custom filter
<ListBox filter={(item, input) => 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.

<Combobox filter={(item, input) => customFilter(item, input)} />

Another solution that I would enjoy seeing, would be enabling this pattern:

// Inside Combobox > Listbox > ListboxSection >
       <Collection
                items={item.options.filter((o) =>
                    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

[nwidynski]

@vezaynk While I believe this feature is already on the roadmap and just waiting for Autocomplete to go stable, you can pretty much achieve what you are after today by hoisting the useListData(), which provides a filter method, up to the controller component and providing it via ListStateContext 👍

[vezaynk]

@nwidynski Would you accept outside contributions for this? This isn't a burning feature for us, but I'm interested in opportunities to dig into react-spectrum internals.

[nwidynski]

Since #7959 looks like Automcomplete is coming out of beta, i will ping @LFDanLu here for more info on the stability of BaseCollection.UNSTABLE_filter.

[snowystinger]

Wouldn't

// Inside Combobox > Listbox > ListboxSection >
       <Collection
                items={item.options.filter((o) =>
                    contains(o.value, use(ComboBoxStateContext)?.inputValue ?? '') ||
                    contains(o.label, use(ComboBoxStateContext)?.inputValue ?? ''),
                )}

Break the rules of hooks, can't call it conditionally, and calling it multiple times?
https://react.dev/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level

[vezaynk]

@snowystinger use can be called conditionally: https://react.dev/reference/react/use#reading-context-with-use

After sleeping on it, it doesn't look like a great pattern regardless. It was just one of the things that I tried.

[snowystinger]

well, TIL, haven't gotten the chance to use use yet. Thanks for that.

[vezaynk]

Last note, I've actually found what I was looking for within defaultItems / defaultFilter by doing a search reconciling the checked item with its related object.

defaultItems={allDropdownOptions}
defaultFilter={(textValue, filter) => {
        const option = findItemByLabel(allDropdownOptions, textValue);
        if (option) {
          const { value, label } = option;
          return contains(value, filter) || contains(label, filter);
        }
        return false;
}}

[LFDanLu]

With regards to BaseCollection.UNSTABLE_filter we still have an action item to refactor + relocate that logic out of BaseCollection, mainly around making it handle all kinds of arbitrary nodes and making it less specific to Menu/ListBox