State Collection Not Filtering

[jenmak-tangelo]

Provide a general summary of the issue here

I have created a multi-select dropdown using react-aria hooks and the issue I am having is this:

• When the user types in their search term, the dropdown list filters down correctly.
• Then when the user presses the down key, the dropdown list filter is removed but the search term is still selected.

My code for the keydown is:

onArrowDown: () => {
    state.selectionManager.focusedKey
      ? state.selectionManager.setFocusedKey(state.collection.getKeyAfter(state.selectionManager.focusedKey))
      : state.selectionManager.setFocusedKey(state.collection.getFirstKey(), 'first');
    state.selectionManager.setFocused(true);
  },

I am using useListState like this:

  const filter = useCallback(
    (nodes: Iterable<Node<ListBoxItemType>>) =>
      search?.length
        ? Array.from(nodes).filter((item) => item.textValue.toLowerCase().includes(search.toLowerCase()))
        : Array.from(nodes),
    [contains, search],
  );

  const state = useListState<ListBoxItemType>({
    items,
    children: getItemChildren() as CollectionChildren<ListBoxItemType>,
    selectionBehavior: 'toggle',
    selectionMode: 'multiple',
    selectedKeys: selectedItems.map((item: ListBoxItemType) => item.id),
    filter,
    onSelectionChange: (keys: Selection) => {
      const selectedKeys =
        keys === 'all'
          ? selectedItems.map((selectedItem) => selectedItem.id as string)
          : Array.from(keys.values() as unknown as string[]);
      onSelectionChange(selectedKeys);
      clearSearch();
    },
  });

🤔 Expected Behavior?

I expect the list to remain filtered when I use the arrow keys to navigate to the select the item.

😯 Current Behavior

All of the items show up in the unfiltered list when I press down key.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

See above.

Version

3.29.1 of react-aria

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge, Other

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Could you provide a minimal reproduction for us? At a glance I don't see anything that could be causing this behavior from your shared code but I'm unsure what hooks you are using or if you have your own custom hooks powering the keyboard interaction behavior