fix(core): update selects to use item-aligned select content

bigcommerce · Apr 12, 2024 · f87c30e · f87c30e
1 parent 768af42
commit f87c30e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 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/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}>