fix: issue where initial values are not set for composite fields

Author: joshunrau

src/components/Form/Form.stories.tsx

@@ -21,7 +21,7 @@ const $ExampleFormData = z.object({
     z.object({
       recordArrayStringInput: z.string(),
       showRecordArrayDynamicField: z.boolean(),
-      recordArrayDynamicField: z.string()
+      recordArrayDynamicField: z.string().optional()
     })
   ),
   date: z.date().optional(),

src/components/Form/NumberRecordField.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import type {
   NumberRecordFieldValue,
@@ -27,8 +27,13 @@ export const NumberRecordField = <T extends NumberRecordFieldValue = NumberRecor
   setValue: setRecordValue,
   value: recordValue
 }: NumberRecordFieldProps<T>) => {
+  const isFirstRenderRef = useRef(true);
+
   useEffect(() => {
-    setRecordValue({});
+    if ((isFirstRenderRef.current && !recordValue) || !isFirstRenderRef.current) {
+      setRecordValue({});
+    }
+    isFirstRenderRef.current = false;
   }, [options]);
 
   if (!recordValue) {

src/components/Form/RecordArrayField.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useRef } from 'react';
 
 import type { RecordArrayFieldValue, RecordArrayFormField } from '@douglasneuroinformatics/libui-form-types';
 import { MinusCircleIcon, PlusCircleIcon } from 'lucide-react';
@@ -25,12 +25,16 @@ export const RecordArrayField = memo(function RecordArrayField({
   setValue: setArrayValue,
   value: arrayValue
 }: RecordArrayFieldProps) {
+  const isFirstRenderRef = useRef(true);
   const { t } = useTranslation('libui');
 
   const createNewRecord = () => Object.fromEntries(Object.keys(fieldset).map((fieldName) => [fieldName, undefined]));
 
   useEffect(() => {
-    setArrayValue([createNewRecord()]);
+    if ((isFirstRenderRef.current && !arrayValue) || !isFirstRenderRef.current) {
+      setArrayValue([createNewRecord()]);
+    }
+    isFirstRenderRef.current = false;
   }, [fieldset]);
 
   if (!arrayValue) {