diff --git a/.changeset/select-anchor-to-trigger.md b/.changeset/select-anchor-to-trigger.md new file mode 100644 index 000000000..d64a7c08b --- /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 b449245fe..358c0da36 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) { return ( @@ -62,26 +67,35 @@ function SelectContent({ {children} + {position === "popper" ? ( + + ) : null} );