From 4b224d5effda952d7d87b96dd30407178edf4115 Mon Sep 17 00:00:00 2001
From: Pedro Guzman <peterlgh7@gmail.com>
Date: Mon, 30 Jun 2025 15:40:54 +0200
Subject: [PATCH] fix: fix onScroll in Select.Content (#12855)

Radix' `Select.Content` is not the scrollable div. It's `Select.Viewport`, which we don't expose. onScroll is useful when the elements in the select are loaded in infinite loading style.

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
---
 .changeset/spotty-ears-end.md                       |  5 +++++
 .../ui/src/components/select/select.tsx             | 13 +++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/spotty-ears-end.md

diff --git a/.changeset/spotty-ears-end.md b/.changeset/spotty-ears-end.md
new file mode 100644
index 0000000000..3817cf2689
--- /dev/null
+++ b/.changeset/spotty-ears-end.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix: fix onScroll in Select.Content
diff --git a/packages/design-system/ui/src/components/select/select.tsx b/packages/design-system/ui/src/components/select/select.tsx
index 918a97c528..5f7d39fbde 100644
--- a/packages/design-system/ui/src/components/select/select.tsx
+++ b/packages/design-system/ui/src/components/select/select.tsx
@@ -105,8 +105,8 @@ const Trigger = React.forwardRef<
 })
 Trigger.displayName = "Select.Trigger"
 
-interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof RadixSelect.Content> {
-}
+interface SelectContentProps
+  extends React.ComponentPropsWithoutRef<typeof RadixSelect.Content> {}
 
 /**
  * The content that appears when the select is open.
@@ -120,6 +120,7 @@ const Content = React.forwardRef<
     {
       className,
       children,
+      onScroll,
       /**
        * Whether to show the select items below (`popper`) or over (`item-aligned`) the select input.
        */
@@ -161,6 +162,7 @@ const Content = React.forwardRef<
             position === "popper" &&
               "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           )}
+          onScroll={onScroll}
         >
           {children}
         </RadixSelect.Viewport>
@@ -201,7 +203,7 @@ const Item = React.forwardRef<
     <RadixSelect.Item
       ref={ref}
       className={clx(
-        "bg-ui-bg-component grid cursor-pointer grid-cols-[15px_1fr] gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors txt-compact-small items-center",
+        "bg-ui-bg-component txt-compact-small grid cursor-pointer grid-cols-[15px_1fr] items-center gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors",
         "focus-visible:bg-ui-bg-component-hover",
         "active:bg-ui-bg-component-pressed",
         "data-[state=checked]:txt-compact-small-plus",
@@ -229,7 +231,10 @@ const Separator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <RadixSelect.Separator
     ref={ref}
-    className={clx("bg-ui-border-component -mx-1 my-1 h-0.5 border-t border-t-ui-border-menu-top border-b border-b-ui-border-menu-bot", className)}
+    className={clx(
+      "bg-ui-border-component border-t-ui-border-menu-top border-b-ui-border-menu-bot -mx-1 my-1 h-0.5 border-b border-t",
+      className
+    )}
     {...props}
   />
 ))