Select with selectionMode="multiple" and nested Autocomplete - any way to access filtered state?

[mryechkin]

I'm trying to build a component using the Select + Autocomplete example from the new docs (or a similar one that Devon also shared on X awhile back), with one small addition - I also need to have "Select All" and "Select None" buttons added within the Popover to quickly select / deselect the options.

Here's an example of what I mean: https://stackblitz.com/edit/6ppf3ucz?file=src%2FExample.tsx

I can get it working just fine with selecting ALL items in the collection. However, when the list is filtered using Autocomplete, I need the "Select All" button to select only all visible items (ie. filtered ones), and not all of the items in the original list.

Is this at all possible with the current components? Is this stored in a particular context that I can read from? I've tried using AutocompleteStateContext, ListBoxContext and SelectStateContext but none of them seem to expose the filtered state.

Would appreciate some help on how to tackle this. Thanks!

[snowystinger]

The ListBox actually handles its own filtering based on the filter function and value provided on the Autocomplete context. This is so that Autocomplete doesn't need to know about the structure of the data and we don't need to pass the collection state up, which would be a little reversed from the usual data flows down approach.

react-spectrum/packages/react-aria-components/src/ListBox.tsx

Line 144 in 848fc8b

let state = UNSTABLE_useFilteredListState(inputState, filter);

Assuming you are declaring your items as a data object, you could use the same filter function that you send to the autocomplete to determine what "all" currently is during the input's onChange.

[mryechkin]

I see - thanks for the clarification @snowystinger!

The first part makes sense. But I don't quite follow the other... So in this example, assuming items are declared as data objects (that I normally wouldn't know the shape of), how would I use contains to determine which items are "all"?

[snowystinger]

Ah, didn't realize you wouldn't know the shape. That might throw a wrench in my idea. I am having trouble envisioning what this looks like, in the example you shared, you do know the shape of the object either to pass in or when rendering the items. Are both of those out of your control? If you don't control the rendering of the items, then does the user also pass in the filter function?

I think this could definitely be easier. That or I'm just not thinking it through all the way yet. @LFDanLu if you have any other ideas.

[mryechkin]

Let me give more context. This would be a re-usable component in a design system library, where users pass in the items and also have control of the rendering of children. The usage of this component would look something like this (we're already using the Select component for single-selection, so trying to keep the component API and usage pattern the same for multi-select):

import { MultiSelect } from '@acme/lib';

// ...

let items = [
  { id: 'news', label: 'News' },
  { id: 'travel', label: 'Travel' },
  { id: 'shopping', label: 'Shopping' },
  { id: 'business', label: 'Business' },
  { id: 'entertainment', label: 'Entertainment' },
  { id: 'food', label: 'Food' },
  { id: 'technology', label: 'Technology' },
  { id: 'health', label: 'Health' },
  { id: 'science', label: 'Science' },
];

// ...

<MultiSelect
  label="Select categories"
  items={items}
  defaultValue={['travel', 'business']}
  selectionMode="multiple"
>
  {(item) => (
    <MultiSelect.Item id={item.id} textValue={item.id}>
      {item.label}
    </MultiSelect.Item>
  )}
</MultiSelect>

In the example above, MultiSelect.Item is just a stylized ListBoxItem. But users could customize what gets rendered - for example if there's more data to be shown, and they wanted to add a description to the label, etc.

Ideally, I would like to avoid users having to pass their own filter function, and have the selection logic for "Select All" and "Select None" buttons be tucked away inside the component as well, so that users don't have to implement that themselves too.

That last part is what I'm struggling with. It would be easier from implementation perspective to just expose onSelectAll / onSelectNone handlers for when those buttons are pressed, and have users provide their own filter function as well - but that would leave more room for error on user end, and would also result in worse DX in my opinion (every time someone wants to use this component they also have to implement this boilerplate code every time).

[mryechkin]

So I think I may have figured this out. Would appreciate a sanity check though.

Here's the updated demo: https://stackblitz.com/edit/6ppf3ucz?file=src%2FSelectButtons.tsx

I'm using your original idea of applying the same filter function on the data set as what's used in Autocomplete, but instead of a user having to pass it in, I'm just baking that into component logic.

Here is the code:

export default function SelectButtons() {
  const selectState = useContext(SelectStateContext);
  const autoCompleteState = useContext(AutocompleteStateContext);
  const { contains } = useFilter({ sensitivity: 'base' });

  const handleClearAll = useCallback(() => {
    selectState.setValue([]);
  }, [selectState]);

  const handleSelectAll = useCallback(() => {
    const allKeys = Array.from(selectState.collection.getKeys());
    const items = allKeys.map((key) => selectState.collection.getItem(key));
    const selectedKeys = items
      .filter(({ textValue }) =>
        contains(textValue, autoCompleteState.inputValue)
      )
      .map(({ key }) => key);
    selectState.setValue(selectedKeys);
  }, [autoCompleteState, contains, selectState]);

  return (
    <>
      <Button onClick={handleSelectAll}>Select All</Button>
      <Button onClick={handleClearAll}>Select None</Button>
    </>
  );
}

This SelectButtons component is then placed within the Autocomplete, so it has access to its context:

<Select>
  {/* ... */}
  <Popover>
    <Autocomplete>
      {/* ... */}
      <SelectButtons />
    </Autocomplete>
  <Popover>
</Select>

Essentially, I'm getting the state from both Autocomplete and the Select, and then applying the same filter function as what Autocomplete uses - like you originally suggested @snowystinger. This way I don't actually need to know the data structure of the items / children that would be passed in, and instead am using the textValue of each item to filter.

Functionality-wise, this works for me and does exactly what I need it to. Does anything jump out here that I didn't think of and could end up biting me down the road?

[snowystinger]

I think that looks fine, the only concern I'd had was keeping the buttons outside of the ListBox, which it looks like you're doing. Thanks for sharing your solution!

[mryechkin]

Awesome! Thanks for your help!