fix: select component wouldn't scroll with long list (#757)

* fix(components): update styles in Select component for scrolling behavior * fix(core): update selects to use item-aligned select content
bigcommerce · Apr 12, 2024 · dac0199 · dac0199
1 parent 6a6af43
commit dac0199
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/.changeset/late-roses-fly.md b/.changeset/late-roses-fly.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Update cart select components to use the item-aligned select content in order to scroll with large Select content.
diff --git a/.changeset/three-hairs-nail.md b/.changeset/three-hairs-nail.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/components": patch
+---
+
+Update styles to scroll when Select content is long.
diff --git a/apps/core/app/[locale]/(default)/cart/_components/shipping-info.tsx b/apps/core/app/[locale]/(default)/cart/_components/shipping-info.tsx
@@ -157,7 +157,7 @@ export const ShippingInfo = ({
               placeholder={t('countryPlaceholder')}
               value={formValues.country}
             >
-              <SelectContent>
+              <SelectContent position="item-aligned">
                 {shippingCountries.map(({ id, countryCode, name }) => {
                   return (
                     <SelectItem key={id} value={`${countryCode}-${id}`}>
@@ -179,7 +179,7 @@ export const ShippingInfo = ({
                 placeholder={t('statePlaceholder')}
                 value={formValues.state}
               >
-                <SelectContent>
+                <SelectContent position="item-aligned">
                   {formValues.states.map(({ id, state }) => {
                     return (
                       <SelectItem key={id} value={state}>

diff --git a/packages/components/src/components/select/select.tsx b/packages/components/src/components/select/select.tsx
@@ -59,19 +59,27 @@ type SelectContentType = typeof SelectPrimitive.Content;
 const SelectContent = forwardRef<
   ElementRef<SelectContentType>,
   ComponentPropsWithRef<SelectContentType>
->(({ children, className, ...props }, ref) => {
+>(({ children, className, position = 'popper', ...props }, ref) => {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
-        position="popper"
+        position={position}
         {...props}
         className={cn(
-          'max-h-radix-select-content-available-height relative w-full bg-white shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          'max-h-radix-select-content-available-height relative w-full bg-white shadow-md',
+          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',
           className,
         )}
         ref={ref}
       >
-        <SelectPrimitive.Viewport className="h-radix-select-content-available-height w-full min-w-[var(--radix-select-trigger-width)]">
+        <SelectPrimitive.Viewport
+          className={cn(
+            'w-full',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]',
+          )}
+        >
           {children}
         </SelectPrimitive.Viewport>
       </SelectPrimitive.Content>