Keep dirty values when resetting the form to add initial default values

enso-org · Aug 20, 2024 · c2713c1 · c2713c1
1 parent e40eefb
commit c2713c1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/app/dashboard/src/components/AriaComponents/Form/Form.tsx b/app/dashboard/src/components/AriaComponents/Form/Form.tsx
@@ -76,6 +76,7 @@ export const Form = React.forwardRef(function Form<Schema extends components.TSc
       schema,
       ...formOptions,
     },
+    defaultValues,
   )
 
   const dialogContext = dialog.useDialogContext()

diff --git a/app/dashboard/src/components/AriaComponents/Form/components/useForm.ts b/app/dashboard/src/components/AriaComponents/Form/components/useForm.ts
@@ -28,6 +28,9 @@ import type * as types from './types'
  */
 export function useForm<Schema extends types.TSchema>(
   optionsOrFormInstance: types.UseFormProps<Schema> | types.UseFormReturn<Schema>,
+  defaultValues?:
+    | reactHookForm.DefaultValues<types.FieldValues<Schema>>
+    | ((payload?: unknown) => Promise<types.FieldValues<Schema>>),
 ): types.UseFormReturn<Schema> {
   const initialTypePassed = React.useRef(getArgsType(optionsOrFormInstance))
 
@@ -59,16 +62,15 @@ export function useForm<Schema extends types.TSchema>(
       })()
     )
 
-  // Expose default values to controlled inputs like `Selector` and `MultiSelector`
-  const initialDefaultValues = React.useRef(
-    'defaultValues' in optionsOrFormInstance ? optionsOrFormInstance.defaultValues : undefined,
-  )
+  const initialDefaultValues = React.useRef(defaultValues)
 
   React.useEffect(() => {
+    // Expose default values to controlled inputs like `Selector` and `MultiSelector`.
+    // Using `defaultValues` is not sufficient as the value needs to be manually set at least once.
     const defaults = initialDefaultValues.current
     if (defaults) {
       if (typeof defaults !== 'function') {
-        form.reset(defaults)
+        form.reset(defaults, { keepDirtyValues: true })
       }
     }
   }, [form])

diff --git a/app/dashboard/src/components/AriaComponents/Inputs/Selector/Selector.tsx b/app/dashboard/src/components/AriaComponents/Inputs/Selector/Selector.tsx
@@ -12,10 +12,9 @@ import {
   Form,
   type TSchema,
 } from '#/components/AriaComponents'
-
-import { mergeRefs } from '#/utilities/mergeRefs'
-
 import RadioGroup from '#/components/styled/RadioGroup'
+import { mergeRefs } from '#/utilities/mergeRefs'
+import { forwardRef } from '#/utilities/react'
 import { tv } from '#/utilities/tailwindVariants'
 import { Controller } from 'react-hook-form'
 import { SelectorOption } from './SelectorOption'
@@ -78,8 +77,7 @@ export const SELECTOR_STYLES = tv({
 /**
  * A horizontal selector.
  */
-// eslint-disable-next-line no-restricted-syntax
-export const Selector = React.forwardRef(function Selector<
+export const Selector = forwardRef(function Selector<
   Schema extends TSchema,
   TFieldName extends FieldPath<Schema>,
 >(props: SelectorProps<Schema, TFieldName>, ref: React.ForwardedRef<HTMLFieldSetElement>) {
@@ -164,7 +162,7 @@ export const Selector = React.forwardRef(function Selector<
                 }}
               >
                 {items.map((item, i) => (
-                  <SelectorOption value={String(i)} label={itemToString(item)} />
+                  <SelectorOption key={i} value={String(i)} label={itemToString(item)} />
                 ))}
               </RadioGroup>
             )
@@ -173,6 +171,4 @@ export const Selector = React.forwardRef(function Selector<
       </div>
     </Form.Field>
   )
-}) as <Schema extends TSchema, TFieldName extends FieldPath<Schema>>(
-  props: React.RefAttributes<HTMLDivElement> & SelectorProps<Schema, TFieldName>,
-) => React.ReactElement
+})