Skip to content

Anchor Select menus to their trigger instead of the selected option - #2033

Closed
midego1 wants to merge 4 commits into
UsefulSoftwareCo:mainfrom
midego1:main
Closed

midego1 wants to merge 4 commits into
UsefulSoftwareCo:mainfrom
midego1:main

Conversation

@midego1

@midego1 midego1 commented Sep 17, 2026

Copy link
Copy Markdown
Contributor

Problem

SelectContent defaults to position="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:

  • Default SelectContent to position="popper", anchored to the trigger with sideOffset={4} and collisionPadding={8}. It opens below the trigger and flips above when there is no room.
  • Render SelectPrimitive.Arrow in popper mode, so a small caret points at the trigger on whichever side the list opens.
  • Overflow moves from the content to the viewport so the arrow is not clipped, and the popper viewport no longer pins its height to the trigger height.

Callers can still pass position="item-aligned" explicitly. This changes the default for every Select in 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 pass position="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 real SelectContent from main and from this branch with the artifact shell stylesheet. No real account data.

First option selected Last option selected
Before (main) before, first selected before, last selected
After (this PR) after, first selected after, no room below: flips above

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

  • CI on this branch, including the cloud E2E suites that drive Selects (admin-users-console, connect-panel, health-check-rpc-ui).
  • Radix reports the placement it chose: no data-side before (item-aligned), data-side="bottom" after, data-side="top" in the flip case.
  • Running on a self-hosted instance: in the artifact above, with the last option selected, the list now opens below the trigger with all options visible.

🤖 Generated with Claude Code

cursoragent and others added 2 commits September 17, 2026 01:14
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>
midego1 and others added 2 commits September 17, 2026 09:59
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>
@midego1 midego1 changed the title fix(react): flip Select caret when content collides above trigger Anchor Select menus to their trigger instead of the selected option Sep 17, 2026
@midego1

midego1 commented Sep 17, 2026

Copy link
Copy Markdown
Contributor Author

Superseded by #2035: the same change (byte-identical select.tsx plus the changeset), moved from my fork's main to a dedicated fix/select-anchor-to-trigger branch as a single commit, so nothing else pushed to the fork can end up in the PR.

@midego1 midego1 closed this Sep 17, 2026
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.

2 participants