Skip to content

fix(Select): snapshot searchable text when a search begins - #1156

Merged
ariser merged 1 commit into
mainfrom
fix/select-search-refresh
Jul 31, 2026
Merged

fix(Select): snapshot searchable text when a search begins#1156
ariser merged 1 commit into
mainfrom
fix/select-search-refresh

Conversation

@ariser

@ariser ariser commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

What

Follow-up to #1154. Select / MultiSelect / CheckboxMultiSelect now 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 searchSource at 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 an eslint-disable for the intentional ref dependency.

How

  • onSearchChange takes the snapshot on the first keystroke of a search ('' → non-empty), then filters.
  • Filtered items stay mounted (hidden, from fix(Select): match search against rendered DOM text #1154), so reading the DOM at that moment is complete and current.
  • Removes the option-set-keyed callback ref and its 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; tsc and ESLint clean (no suppressions).

🤖 Generated with Claude Code

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-bot

changeset-bot Bot commented Jul 29, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 92157ce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clickhouse/click-ui Patch

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

@ariser
ariser requested review from XOP and vineethasok July 29, 2026 16:21
@workflow-authentication-public

Copy link
Copy Markdown
Contributor

Storybook Preview Deployed

✅ Preview URL: https://click-nrslq9k2p-clickhouse.vercel.app

Built from commit: fef6e062b8e733b3c590b88f9fdfe86d448cbf8a

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 InternalSelect to capture searchSource from 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 explicit captureSearchSource() 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.

@ariser
ariser merged commit cc02842 into main Jul 31, 2026
12 checks passed
@ariser
ariser deleted the fix/select-search-refresh branch July 31, 2026 15:59
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.

3 participants