Skip to content

fix(react): flip Select caret when content collides above trigger - #83

Merged
midego1 merged 1 commit into
mainfrom
cursor/fix-select-caret-flip-f17e
Sep 17, 2026
Merged

midego1 merged 1 commit into
mainfrom
cursor/fix-select-caret-flip-f17e

Conversation

@midego1

@midego1 midego1 commented Sep 17, 2026

Copy link
Copy Markdown
Owner

Problem

On long Select lists (e.g. Artifacts → GSC board site picker), the shared Select looks correct when a top item is selected (menu opens below the trigger).

When a bottom item is selected, the menu flips above the trigger, but:

  1. The decorative caret stays on the top edge pointing up (wrong edge / wrong direction for data-side=top).
  2. The open menu feels disconnected from the trigger — item-aligned positioning leaves the selected row stranded at the far end of a floating panel.

Expected

  • data-side=bottom: caret on the top edge of the menu, pointing toward the trigger.
  • data-side=top: caret on the bottom edge of the menu, pointing toward the trigger.
  • Selected / nearby rows stay visually close to the trigger for long lists.

Screenshots (redacted)

Top item selected — menu below, caret on top edge (OK):

Select menu below trigger with top item selected

Bottom item selected — menu above, caret still on top edge (bug):

Select menu above trigger with bottom item selected and mismatched caret

Close-up of flipped menu + wrong caret:

Close-up of Select caret on wrong edge when menu is above trigger

Fix

In packages/react/src/components/select.tsx:

  • Default SelectContent to Radix position="popper" with sideOffset / collisionPadding so the panel stays anchored to the trigger when it flips.
  • Render SelectPrimitive.Arrow (popper-only) so the caret follows data-side.
  • Move scroll overflow onto the viewport so the arrow is not clipped.

Scoped to the shared Select primitive only — no GSC artifact business-logic changes.

Test plan

  • Open a long Select (many options); select a top item → menu below, caret on top edge toward trigger.
  • Select a bottom item near the viewport edge → menu above, caret on bottom edge toward trigger.
  • Confirm selected row stays near the trigger (not stranded at the far end of the panel).
  • Spot-check existing Select call sites (policies, connection owner, org invite).

No dedicated Select unit/story suite in-repo; verified via packages/react typecheck after the change.

Issue

Could not create a tracking issue on UsefulSoftwareCo/executor (GitHub API 403 — token cannot open issues there). Problem section above is the bug description.

Open in Web Open in Cursor 

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.
@midego1
midego1 marked this pull request as ready for review September 17, 2026 01:20
@midego1
midego1 merged commit f7af660 into main Sep 17, 2026
1 of 37 checks passed
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