Skip to content

feat: add disableAutoFilter prop to Combobox for custom filtering #3615

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Yeison07
Copy link

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.

  • Your branch should be prefixed with: docs/, feature/, chore/, bugfix/
  • Contributions should target the main branch
  • Documentation should be updated to describe all relevant changes
  • Run pnpm check in the root of the monorepo
  • Run pnpm format in the root of the monorepo
  • Run pnpm lint in the root of the monorepo
  • Run pnpm test in the root of the monorepo
  • If you modify /package projects, please supply a Changeset

Changesets

View our documentation to learn more about Changesets. To create a Changeset:

  1. Navigate to the root of the monorepo in your terminal
  2. Run pnpm changeset and follow the prompts
  3. Commit and push the changeset before flagging your PR review for review.

Copy link

vercel bot commented Jul 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
themes.skeleton.dev 🔄 Building (Inspect) Visit Preview 💬 Add feedback Jul 19, 2025 1:40pm
www.skeleton.dev ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 19, 2025 1:40pm

@endigo9740
Copy link
Contributor

@Yeison07 just confirming I see this is ready for review. I've been away the last week so I'm just getting back on my feet here. It may take me a bit longer to get a proper review in, but I will asap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Combobox not updating with reactive data in Svelte 5 ($state)
2 participants