From 0aa711bcba06f494c8cdbe58f85cdb569003310f Mon Sep 17 00:00:00 2001
From: midego <61051030+midego1@users.noreply.github.com>
Date: Thu, 17 Sep 2026 12:54:05 +0700
Subject: [PATCH] Anchor Select menus to their trigger instead of the selected
 option

SelectContent defaulted to position="item-aligned", which places the list
so the selected option sits over the trigger. With a late option selected
in a long list, the panel shifted up over the page and clipped. Default to
popper positioning (sideOffset 4, collisionPadding 8) so the list opens
below the trigger and flips above when there is no room, and render a
Radix Arrow so a caret points at the trigger on either side.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .changeset/select-anchor-to-trigger.md   |  5 +++++
 packages/react/src/components/select.tsx | 28 ++++++++++++++++++------
 2 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/select-anchor-to-trigger.md

diff --git a/.changeset/select-anchor-to-trigger.md b/.changeset/select-anchor-to-trigger.md
new file mode 100644
index 0000000000..d64a7c08b7
--- /dev/null
+++ b/.changeset/select-anchor-to-trigger.md
@@ -0,0 +1,5 @@
+---
+"executor": patch
+---
+
+Open dropdown menus anchored to their trigger, so picking an option near the end of a long list no longer shifts the menu up over the page and clips it.
diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
index b449245fe1..358c0da360 100644
--- a/packages/react/src/components/select.tsx
+++ b/packages/react/src/components/select.tsx
@@ -53,8 +53,13 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  position = "item-aligned",
+  // Popper keeps the panel anchored to the trigger (with collision flip) so a
+  // long list does not leave the selected row stranded at the far end of an
+  // item-aligned floating panel. Arrow only renders in popper mode.
+  position = "popper",
   align = "center",
+  sideOffset = 4,
+  collisionPadding = 8,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
@@ -62,26 +67,35 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          // Overflow stays on the viewport so the side arrow is not clipped when
+          // the menu flips above/below the trigger.
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-visible rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className,
         )}
         position={position}
         align={align}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
         {...props}
       >
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+            "overflow-x-hidden overflow-y-auto rounded-[inherit] p-1",
+            position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
           )}
         >
           {children}
         </SelectPrimitive.Viewport>
         <SelectScrollDownButton />
+        {position === "popper" ? (
+          <SelectPrimitive.Arrow
+            data-slot="select-arrow"
+            width={11}
+            height={5}
+            className="fill-popover stroke-border"
+          />
+        ) : null}
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
   );