Hide filtered-out groups and dangling dividers in select listboxes - #434
Merged
Conversation
Filtering happened per-option in `renderOption`, but the shared listbox renderer emitted the `role="group"` wrapper, its heading, and every divider unconditionally. A query that matched nothing in a group left its header stranded over an empty group, and searching for a term that matched nothing at all showed a stack of orphan headers and stray dividers. `renderSelectListboxOptions` now renders a section's options first and skips the whole wrapper when nothing survived the filter, then resolves dividers in a second pass so only the ones still separating two visible entries are kept -- leading, trailing, and now-adjacent dividers are dropped. Section and divider counters still advance over skipped entries so React keys stay stable as the query changes. Fixes #413 Claude-Session: https://claude.ai/code/session_01XFkkvUQfynGRedEYDNxKoY
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Fixes #413.
Problem
The shared listbox renderer emitted each section's
role="group"wrapper, its title heading, and every divider unconditionally, while the actual filtering happened per-option insiderenderOption(which returnsnullfor non-matches). Searching for a term that matched nothing in a group left that group's header stranded above an empty group; searchingzzzin a fully groupedSelectshowed a stack of orphan headers separated by stray dividers.Fix
renderSelectListboxOptionsnow:Section and divider counters still advance over skipped entries so React keys stay stable as the query changes.
Note the divider pass also collapses a run of adjacent dividers into one. That's required for the hidden-group case and is what a consumer would want from a literal
[{divider}, {divider}]anyway.Tests
Three regression tests, all verified to fail on
main:Select— grouped options under a query that matches one group (other header and the divider go away) and under a no-match query (no headers, no groups, no options).Select— dividers left dangling by the query: two dividers around a filtered-out option collapse to one; a single surviving option keeps none.MultiSelect— the same grouped scenarios.Full suite, lint, typecheck, and format all pass.
https://claude.ai/code/session_01XFkkvUQfynGRedEYDNxKoY