Updated field preset inputs to update errors for duplicate labels

Author: mmtandoc

components/settings/SettingsEntry/field-presets/FieldMultiPresetInput.tsx

@@ -1,3 +1,5 @@
+import _ from "lodash"
+import { useMemo } from "react"
 import {
   Controller,
   ControllerProps,
@@ -61,11 +63,25 @@ const FieldMultiPresetInput = <
     control: formMethods.control,
   })
 
+  const arrayPath = useMemo(
+    () => name.match("/(.*).d+/")?.[0] as string,
+    [name],
+  )
+
   return (
     <>
       <FormGroup className="field-multipreset" row>
         <Input
-          {...formMethods.register(`${name}.label` as Path<TFieldValues>)}
+          {...formMethods.register(`${name}.label` as Path<TFieldValues>, {
+            deps: _.range(arrayMethods.fields.length).reduce(
+              (arr, i2) => [
+                ...arr,
+                `${arrayPath}.${i2}.label`,
+                `${arrayPath}.${i2}.value`,
+              ],
+              [] as string[],
+            ),
+          })}
           fullWidth
         />
         <div className="multipreset-value-list">
@@ -75,6 +91,16 @@ const FieldMultiPresetInput = <
                 control={formMethods.control}
                 name={`${name}.value.${index}` as Path<TFieldValues>}
                 render={ValueInput}
+                rules={{
+                  deps: _.range(arrayMethods.fields.length).reduce(
+                    (arr, i2) => [
+                      ...arr,
+                      `${arrayPath}.${i2}.label`,
+                      `${arrayPath}.${i2}.value`,
+                    ],
+                    [] as string[],
+                  ),
+                }}
               />
               <div className="row-actions">
                 <IconButton

components/settings/SettingsEntry/field-presets/FieldPresetFieldArray.tsx

@@ -41,6 +41,7 @@ type FieldPresetFieldArrayProps<
   allowMultiple?: boolean
   valueInput: ControllerProps<TFieldValues>["render"]
 }
+
 const FieldPresetFieldArray = <
   TValue = unknown,
   TFieldValues extends FieldValues = FieldValues,
@@ -93,6 +94,7 @@ const FieldPresetFieldArray = <
                 <FieldPresetInput
                   name={`${name}.${index}`}
                   formMethods={formMethods}
+                  arrayMethods={arrayMethods as any} //TODO: Fix typing
                   valueInput={valueInput}
                 />
               )}

components/settings/SettingsEntry/field-presets/FieldPresetInput.tsx

@@ -1,9 +1,12 @@
+import _ from "lodash"
+import { useMemo } from "react"
 import {
   Controller,
   ControllerProps,
   FieldArrayPath,
   FieldValues,
   Path,
+  UseFieldArrayReturn,
   UseFormReturn,
 } from "react-hook-form"
 
@@ -15,6 +18,7 @@ type FieldPresetInputProps<
 > = {
   name: `${TFieldArrayName}.${number}`
   formMethods: UseFormReturn<TFieldValues>
+  arrayMethods: UseFieldArrayReturn<TFieldValues, TFieldArrayName>
   valueInput: ControllerProps<TFieldValues>["render"]
 }
 
@@ -24,23 +28,45 @@ const FieldPresetInput = <
 >(
   props: FieldPresetInputProps<TFieldValues, TFieldArrayName>,
 ) => {
-  const { name, formMethods, valueInput: ValueInput } = props
+  const { name, formMethods, arrayMethods, valueInput: ValueInput } = props
 
   const { register } = formMethods
 
   const presetValue = formMethods.watch(`${name}.value` as Path<TFieldValues>)
 
+  const { arrayPath, index } = useMemo(
+    () =>
+      name.match(/(?<arrayPath>.*)\.(?<index>\d+)/)?.groups as {
+        arrayPath: string
+        index: string
+      },
+    [name],
+  )
+
   return (
     <FormGroup row>
       <Input
-        {...register(`${name}.label` as Path<TFieldValues>)}
+        {...register(`${name}.label` as Path<TFieldValues>, {
+          deps: _.range(arrayMethods.fields.length)
+            .filter((i2) => i2 !== Number(index))
+            .reduce(
+              (arr, i2) => [...arr, `${arrayPath}.${i2}.label`],
+              [] as string[],
+            ),
+        })}
         placeholder={presetValue}
         fullWidth
       />
       <Controller
         control={formMethods.control}
         name={`${name}.value` as Path<TFieldValues>}
         render={ValueInput}
+        rules={{
+          deps: _.range(arrayMethods.fields.length).reduce(
+            (arr, i2) => [...arr, `${arrayPath}.${i2}.label`],
+            [] as string[],
+          ),
+        }}
       />
     </FormGroup>
   )