fix: fix select multiple data bug

Author: christianmat

.changeset/spicy-walls-behave.md

@@ -0,0 +1,5 @@
+---
+"@frigade/react": patch
+---
+
+Fixes an issue related to form type select/multiple

apps/smithy/.storybook/main.ts

@@ -1,7 +1,14 @@
 import path from "path";
 
 // SEE: https://storybook.js.org/docs/react/faq#how-do-i-fix-module-resolution-in-special-environments
-const getAbsolutePath = (packageName) =>
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+// Utility to resolve the absolute path of a given package. Storybook requires absolute
+// addon paths when the config file is executed in an ESM context (Node ≥ 18 / SB 8).
+// We can still rely on Node's `require.resolve` by creating a CommonJS `require`
+// function that is bound to this ESM module.
+const getAbsolutePath = (packageName: string) =>
   path.dirname(require.resolve(path.join(packageName, "package.json")));
 
 /** @type { import('@storybook/react-vite').StorybookConfig } */

packages/react/src/components/Form/fields/SelectMultipleField.tsx

@@ -11,32 +11,31 @@ import * as baseStyles from '@/components/Form/fields/BaseField.styles'
 
 export function SelectMultipleField(props: FormFieldProps) {
   const {
-    field: { onChange },
+    field: { onChange, value },
     fieldData: { options = [] },
   } = props
 
-  const [valueArray, setValueArray] = React.useState<string[]>([])
+  // Ensure we always work with an array of strings coming from RHF
+  const valueArray: string[] = Array.isArray(value) ? value : []
 
-  function setValueInArray(value: string) {
-    let updatedValueArray = []
-    if (valueArray.includes(value)) {
-      updatedValueArray = [...valueArray.filter((v) => v !== value)]
-    } else {
-      updatedValueArray = [...valueArray, value]
-    }
-    setValueArray(updatedValueArray)
+  function toggleValue(optionValue: string) {
+    const updatedValueArray = valueArray.includes(optionValue)
+      ? valueArray.filter((v) => v !== optionValue)
+      : [...valueArray, optionValue]
+
+    // Let react-hook-form handle the new value
     onChange(updatedValueArray)
   }
 
   return (
     <BaseField {...props}>
       {() => (
         <Flex.Column gap={2} part="field-select-multiple">
-          {options.map(({ label, value }) => (
+          {options.map(({ label, value: optionValue }) => (
             <Checkbox.Root
-              value={valueArray.includes(value) ? value : undefined}
-              onCheckedChange={() => setValueInArray(value)}
-              key={value}
+              key={optionValue}
+              checked={valueArray.includes(optionValue)}
+              onCheckedChange={() => toggleValue(optionValue)}
               asChild
             >
               <Box
@@ -61,7 +60,7 @@ export function SelectMultipleField(props: FormFieldProps) {
                   borderColor="neutral.border"
                   borderRadius="100%"
                   flex="0 0 auto"
-                  id={value}
+                  id={optionValue}
                   padding="0"
                   part="field-check-value"
                   position="relative"