fix(core): issue with keys in form components (#1197)

* fix(core): issue with keys in input components * fix: set key before spreading props * chore: update changeset
bigcommerce · Aug 1, 2024 · c831677 · c831677
1 parent 51704d9
commit c831677
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 4 deletions.
diff --git a/.changeset/lovely-falcons-hear.md b/.changeset/lovely-falcons-hear.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Set key before spreading prop in some form components.
diff --git a/core/components/ui/pick-list/pick-list.tsx b/core/components/ui/pick-list/pick-list.tsx
@@ -36,7 +36,11 @@ const PickList = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, Props>(
           const { defaultImage, label, value, onMouseEnter, ...itemProps } = item;
 
           return (
-            <div className="flex items-center p-4" key={value} onMouseEnter={onMouseEnter}>
+            <div
+              className="flex items-center p-4"
+              key={`${id}-${value}`}
+              onMouseEnter={onMouseEnter}
+            >
               {Boolean(defaultImage) && (
                 <BcImage
                   alt={defaultImage?.altText || ''}

diff --git a/core/components/ui/rectangle-list/rectangle-list.tsx b/core/components/ui/rectangle-list/rectangle-list.tsx
@@ -33,9 +33,9 @@ const RectangleList = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, Pr
 
           return (
             <RadioGroupPrimitive.Item
+              key={`${id}-${value}`}
               {...itemProps}
               className="border-2 px-6 py-2.5 font-semibold text-black hover:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:border-gray-100 disabled:text-gray-400 disabled:hover:border-gray-100 data-[state=checked]:border-primary"
-              key={`${id}-${value}`}
               value={value}
             >
               {item.label}

diff --git a/core/components/ui/select/select.tsx b/core/components/ui/select/select.tsx
@@ -64,11 +64,11 @@ const Select = forwardRef<ElementRef<typeof SelectPrimitive.Trigger>, Props>(
 
                 return (
                   <SelectPrimitive.Item
+                    key={`${id}-${value}`}
                     {...optionProps}
                     className={
                       'relative flex w-full cursor-pointer select-none items-center justify-between overflow-visible px-4 py-2 outline-none hover:bg-secondary/10 hover:text-primary focus-visible:bg-secondary/10 data-[disabled]:pointer-events-none data-[state="checked"]:bg-secondary/10 data-[state="checked"]:text-primary data-[disabled]:opacity-50'
                     }
-                    key={`${id}-${value}`}
                     value={value}
                   >
                     <SelectPrimitive.ItemText>{label}</SelectPrimitive.ItemText>

diff --git a/core/components/ui/swatch/swatch.tsx b/core/components/ui/swatch/swatch.tsx
@@ -34,9 +34,9 @@ const Swatch = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, Props>(
 
           return (
             <RadioGroupPrimitive.Item
+              key={`${id}-${value}`}
               {...itemProps}
               className="group h-12 w-12 border-2 bg-white p-1 hover:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:border-gray-100 disabled:hover:border-gray-100 data-[state=checked]:border-primary"
-              key={`${id}-${value}`}
               title={label}
               value={value}
             >