-
Notifications
You must be signed in to change notification settings - Fork 88
Description
Bug Description
When using the search functionality in the MultiSelect component, typing characters works correctly and filters the options as expected. However, when using the backspace key to remove characters from the search query, the options list does not refresh properly and may show incorrect or stale filtering results.
Steps to Reproduce
- Open a MultiSelect component with searchable enabled (
searchable={true}) - Click to open the dropdown
- Type some characters in the search input to filter options (this works correctly)
- Use backspace to remove characters from the search query
- Observe that the options list does not update/refresh to show the correct filtered results
Expected Behavior
When removing characters with backspace, the options list should refresh and show all options that match the updated (shorter) search query, just like when typing characters.
Actual Behavior
The options list remains filtered based on the previous search state and doesn't update when characters are removed via backspace.
Root Cause
The issue is caused by conflicting filtering mechanisms:
- The
cmdklibrary's built-in filtering (enabled by default in the Command component) - The MultiSelect component's custom filtering logic in the
filteredOptionsuseMemo
When backspace is used, these two filtering systems get out of sync, causing the options list to not refresh properly.
Proposed Solution
Add shouldFilter={false} to the Command component to disable the cmdk library's built-in filtering and rely solely on the custom filtering logic:
<Command shouldFilter={false}>
{/* rest of the component */}
</Command>