feat: add disableAutoFilter prop to Combobox for custom filtering #3615
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Linked Issue
Closes #3600
Description
This PR addresses the issues reported in #3600, where the Combobox component experiences desynchronization between the provided data and the filtered options. The root cause is the internal "contains" filter logic, which always executes before any external handlers (e.g., onInputValueChange). This results in the data being one step behind, causing lag in scenarios involving dynamic filtering, such as minimum length checks or asynchronous API fetches.
To resolve this, I've introduced an optional boolean prop disableAutoFilter (default: false). When set to true, the internal filtering is skipped, allowing users full control over data updates via their own onInputValueChange handler. This ensures seamless handling of custom filtering logic without interference from the component's built-in behavior.
Additionally, a reactive $effect has been added to synchronize the options with the data prop when auto-filtering is disabled, maintaining reactivity.
This approach preserves backward compatibility, as the default behavior remains unchanged.
Alternatives Considered
I evaluated a more flexible option, such as introducing a filterFn prop to allow custom filter callbacks. However, the disableAutoFilter prop provides a simpler and more accessible solution for users, especially beginners, while still enabling advanced customization.
Checklist
Please read and apply all contribution requirements.
docs/
,feature/
,chore/
,bugfix/
main
branchpnpm check
in the root of the monorepopnpm format
in the root of the monorepopnpm lint
in the root of the monorepopnpm test
in the root of the monorepo/package
projects, please supply a ChangesetChangesets
View our documentation to learn more about Changesets. To create a Changeset:
pnpm changeset
and follow the prompts