Search results show all items when one is selcted

[cullylarson]

Expected Behavior

Type something into the search box. The list items are filtered to only those containing the search text. When I select one of the items, the item is selected and the filtered list remains the same (still filtered).

Actual Behavior

I type some text into the search box. The list items are filtered to only those containing the search text. When I select one of the items, the items is selected, but all of the items are then shown in the list, not just the filtered items as before. The search text remains unchanged. If I add/remove a character from the search box, the list is once again filtered.

I've tried controlling the searchValue and the same thing happens.

The selectedItems are controlled.

Steps to Reproduce the Problem

This is what the component looks like:

<MultiSelect
    name={name}
    id={name}
    items={items}
    selectedItems={selectedItems}
    onChange={handleChange}
/>

handleChange sets state, but only sets the list of ids (not the list of objects themselves).

selectedItems and items are derived on each render based on the list of ids set in state.

Could this potentially be happening because selectedItems and items are not the same (i.e. ===) objects on each render? Could the react-multi-select be comparing the objects directly somehow (instead of comparing ids) and re-rendering the list without paying attention to searchValue?

Specifications

• Version: 1.1.3
• Platform: Ubuntu, in Docker

[cullylarson]

I refactored the controlling component to store items and selectedItems as objects and the issue went away. I'm not sure if this represents a bug or not, but hopefully it's helpful info. Let me know if you have any questions.

[mattcorner]

Same issue here. Also solved by controlling the selectedItems and items through useState in the parent component, but as culllarson says, seems to be a case of object comparison rather than id comparison causing this issue.

[mvanmaele]

I refactored the controlling component to store items and selectedItems as objects and the issue went away. I'm not sure if this represents a bug or not, but hopefully it's helpful info. Let me know if you have any questions.

This solution worked for me as well using state hooks. Thanks @cullylarson!