Anchor Select menus to their trigger instead of the selected option

.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.

packages/react/src/components/select.tsx

@@ -53,35 +53,49 @@ 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 (
     <SelectPrimitive.Portal>
       <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>
   );