Rank Select options with match-sorter#26170
Open
dennisoelkers wants to merge 5 commits into
Open
Conversation
Use match-sorter inside the shared `Select` component to filter and sort options by match quality (exact, starts-with, word-starts-with, contains, ...) so prefix matches bubble to the top of typeahead suggestions across every caller (FieldSelect and the rest). Async selects keep server-driven results untouched. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
After match-sorter re-ranks options on each keystroke, react-select's MenuList kept its previous scroll offset, so the highest-ranked matches ended up scrolled out of view. Make `inputValue` a controlled prop on react-select and have `CustomMenuList` snap `scrollTop` back to 0 whenever it changes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
linuspahl
approved these changes
Jun 4, 2026
|
|
||
| const sortedOptions = | ||
| !async && inputValue | ||
| ? matchSorter(rawOptions, inputValue, { |
Contributor
There was a problem hiding this comment.
I can see a benefit in memoizing the result of matchSorter, so it is not called on every render. Especially in forms we often face the challenge that elements rerender frequently when interacting with the form. Since I did not notice any performance problems, this is not a high priority for me.
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
2 participants
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.
Description
Use
match-sorterinside the sharedSelectcomponent to filter and rank options by match quality (exact → starts-with → word-starts-with → contains → ...) so the best prefix matches bubble to the top of typeahead suggestions across every caller (e.g.FieldSelectand the rest).Async selects are left untouched — their results are server-driven, so we keep the existing
filterOptionpath for them.Motivation and Context
The default sorting is a substring match that preserves the original option order. With long lists (fields, lookup tables, streams, ...) this means typing a perfectly matching prefix can leave the desired entry buried below incidental substring hits:
Fig 1. Before: User desparately searching for the
sourcefield although it was already completely typed inSwitching synchronous selects to
match-sorterreorders the dropdown by relevance, which matches what users intuitively expect:Fig 2. After: The user is happy now, the right field is presented just after two characters!
How Has This Been Tested?
yarn tscFieldSelecttypeahead and a few otherSelectcallers in the dev server — exact and prefix matches now appear at the top of the menu; async selects (e.g. user pickers) behave unchanged.Screenshots (if appropriate):
Types of changes
Checklist:
Fixes #11485