fix(Select): snapshot searchable text when a search begins - #1156
Merged
Conversation
Replace the mount-time DOM capture (a callback ref re-keyed on the option set, which needed an eslint-disable) with a snapshot taken on the first search keystroke. Because filtered items stay mounted (hidden), reading the DOM at that point is complete and current, so search matches text an item changed after the menu opened — and there's no ref-dependency trick left. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 92157ce The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
Storybook Preview Deployed✅ Preview URL: https://click-nrslq9k2p-clickhouse.vercel.app Built from commit: |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the Select-family search implementation to capture (snapshot) each option’s rendered DOM text at the moment a user starts searching, preventing stale searchable text when option rows update their displayed content after the menu opens.
Changes:
- Refactors
InternalSelectto capturesearchSourcefrom the DOM on the transition from empty query to non-empty query ('' → non-empty), instead of capturing on mount/options changes. - Replaces the option-set-keyed callback ref approach with a stable
ref(listNode) plus an explicitcaptureSearchSource()function. - Adds a regression test covering an item whose visible text changes after the menu opens.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/components/Select/Select.search.test.tsx |
Adds a new test case ensuring search matches text that updates after the menu opens. |
src/components/Select/common/InternalSelect.tsx |
Captures searchable DOM text when a search begins and wires search input changes through the new handler. |
.changeset/select-search-refresh.md |
Documents the behavior change and rationale as a patch changeset. |
XOP
approved these changes
Jul 31, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What
Follow-up to #1154.
Select/MultiSelect/CheckboxMultiSelectnow snapshot each item's rendered text from the DOM when a search begins, instead of capturing it up front.Why
#1154 read item text into
searchSourceat mount, via a callback ref re-keyed on the option set. That snapshot went stale if an item's text changed after the menu opened without the option set changing — e.g. a row that renders from its own state and settles on its label after mount. It also needed aneslint-disablefor the intentional ref dependency.How
onSearchChangetakes the snapshot on the first keystroke of a search ('' → non-empty), then filters.eslint-disable; visibility, navigation, and highlight stay derived.Tradeoff
Options that arrive while a query is already active aren't re-snapshotted until the search is cleared and restarted. Niche — a consumer feeding options from a server as you type generally doesn't want click-ui's client-side filter running on top.
Testing
Added a case for text a row settles on after the menu opened; existing Select-family search suites unchanged. 83 tests green;
tscand ESLint clean (no suppressions).🤖 Generated with Claude Code