← Back to Papercuts
CDX-3In ProgressMedium

Cluster dropdown: ranked fuzzy search + auto-sized menu

## Context Per Crane's feedback in [#console-team Slack](<https://materializeinc.slack.com/archives/CU7ELJ6E9/p1778690013659759>): * The cluster dropdown was too narrow to display longer cluster names on Edge and Firefox (Safari was unaffected, masking the issue). * Cluster search did substring-only filtering, with no ranking — typing `prod` made the user scroll past `production-analytics-prod` to find `prod`. ## Change Updates `console/src/platform/shell/ClusterDropdown.tsx`: * Replaces react-select's default substring filter with [`match-sorter`](<https://www.npmjs.com/package/match-sorter>), which ranks results by `CASE_SENSITIVE_EQUAL > EQUAL > STARTS_WITH > WORD_STARTS_WITH > CONTAINS > ACRONYM > MATCHES`. Typing `prod` now surfaces `prod` above `production-analytics`, which surfaces above `production-analytics-prod`. * Controls react-select's `inputValue` so options can be re-ranked on every keystroke; sets `filterOption={null}` to disable the now-redundant default filter. * Drops the hard-coded `menuWidth` so the popover auto-sizes to the longest cluster name. The prior fixed width still truncated longer names; Safari was forgiving thanks to `-webkit-line-clamp` quirks. * Extracts the ranking logic into an exported `rankClusters(options, inputValue)` helper for unit testing. Adds `match-sorter@^8.0.0` (\~3 KB gzipped) to `console/package.json`. ## Tests New file: `console/src/platform/shell/ClusterDropdown.test.ts` — 7 cases covering empty input (returns original reference), exact > starts-with > contains ordering, case-insensitivity, acronym match (`qs` → `quickstart`), substring beats subsequence (`intro` → `mz_introspection` before `production-analytics-prod`), no-match, and single-match filtering. ## Out of scope Crane's third request — SQL shell session recovery — is not addressed here. It needs its own design discussion (localStorage vs. server-side persistence). ## PR [https://github.com/MaterializeInc/materialize/pull/36556](<https://github.com/MaterializeInc/materialize/pull/36556>)

May PapercutsAssigned: Valerie ChiangView in Linear

Results

building5/15/2026, 6:37:35 PMView workflow run
Loading results...