Conversation
Default SelectContent to popper positioning with a Radix Arrow that follows data-side, so long lists stay anchored to the trigger and the decorative caret points at the control when the menu flips above.
fix(react): flip Select caret when content collides above trigger
midego1
added a commit
to midego1/executor
that referenced
this pull request
Sep 17, 2026
Only packages/react/src/components/select.tsx from 3cf7657 (upstream PR UsefulSoftwareCo#2033), without its screenshots, so the live image changes in exactly one component. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The PR description links real before/after captures hosted on the fork's assets/select-popper branch instead, so no binaries land in docs/. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
Author
|
Superseded by #2035: the same change (byte-identical |
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.
Problem
SelectContentdefaults toposition="item-aligned". In that mode Radix places the list so the selected option sits on top of the trigger. That's fine when the first option is selected, but with a later option selected in a long list, the whole panel shifts upward over the content above the trigger, gets clipped, and shows a scroll-up button. Hit in practice by a site picker in an artifact (a Search Console board with eight properties).Fix
packages/react/src/components/select.tsx, plus a patch changeset:SelectContenttoposition="popper", anchored to the trigger withsideOffset={4}andcollisionPadding={8}. It opens below the trigger and flips above when there is no room.SelectPrimitive.Arrowin popper mode, so a small caret points at the trigger on whichever side the list opens.Callers can still pass
position="item-aligned"explicitly. This changes the default for everySelectin the console as well as in artifacts, which is intended, since the same effect applies to any long Select. The two existing callers that already passposition="popper"(pages/policies.tsx,plugins/connection-owner.tsx) keep their placement and gain the caret.Screenshots
Reproduced with placeholder data (
site-N.example), rendering the realSelectContentfrommainand from this branch with the artifact shell stylesheet. No real account data.main)Top-right is the bug: the panel jumps above the trigger, covers the heading and clips with a scroll-up button. In the bottom row the panel stays anchored to the trigger with every option visible, and flips above with the caret on its bottom edge when the trigger sits low in the viewport.
Verification
admin-users-console,connect-panel,health-check-rpc-ui).data-sidebefore (item-aligned),data-side="bottom"after,data-side="top"in the flip case.🤖 Generated with Claude Code