Merge pull request #146 from workfloworchestrator/2076-values-drop-on-errors

2076 values drop on errors

Author: DutchBen

frontend/.changeset/eleven-rabbits-walk.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Removes form reset after render to avoid losing values on errors

frontend/packages/pydantic-forms/src/components/fields/ArrayField.tsx

@@ -3,16 +3,21 @@ import { useFieldArray } from 'react-hook-form';
 
 import { usePydanticFormContext } from '@/core';
 import { fieldToComponentMatcher } from '@/core/helper';
-import {
-    PydanticFormElementProps,
-    PydanticFormField,
-    PydanticFormFieldType,
-} from '@/types';
+import { PydanticFormElementProps } from '@/types';
 import { itemizeArrayItem } from '@/utils';
 
 import { RenderFields } from '../render';
 
 export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
+    // TODO/NOTE: Default array values on nested object fields are not displayed correctly.
+    // This looks like its a react-hook-form issue. It doesn't - so far - occur in WFO context so we
+    // will not fix for now. Observed behavior:
+    // - The default values are set.
+    // - The array shows without items
+    // - As soon as one item is added, the other items are automatically shown.
+    // As possible fix is to do a setValue of the array field in useEffect.
+    // Running a rhf.reset() in the RenderForm component works but introduces other issues, resetting the form when errors occur.
+
     const { rhf, config } = usePydanticFormContext();
 
     const { control } = rhf;
@@ -24,19 +29,6 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
     const { minItems = 1, maxItems = undefined } =
         pydanticFormField?.validations;
 
-    const getInitialValue = (arrayItem?: PydanticFormField) => {
-        switch (arrayItem?.type) {
-            case PydanticFormFieldType.STRING:
-                return '';
-            case PydanticFormFieldType.INTEGER:
-                return 0;
-            case PydanticFormFieldType.BOOLEAN:
-                return false;
-            default:
-                return undefined;
-        }
-    };
-
     if (!arrayItem) return '';
 
     const component = fieldToComponentMatcher(
@@ -96,8 +88,7 @@ export const ArrayField = ({ pydanticFormField }: PydanticFormElementProps) => {
                 <div
                     onClick={() => {
                         append({
-                            [arrayName]:
-                                arrayItem.default || getInitialValue(arrayItem),
+                            [arrayName]: arrayItem.default,
                         });
                     }}
                     style={{

frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx

@@ -27,21 +27,17 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         skipSuccessNotice,
         loadingComponent,
         rhf,
-        initialData,
     } = contextProps;
+
     const { formRenderer, footerRenderer, headerRenderer } = config || {};
 
     useEffect(() => {
-        if (rhf.getValues().length === 0) {
+        if (rhf.getValues().length !== 0) {
             // Only trigger validations if there are values
             rhf.trigger();
         }
     }, [rhf, pydanticFormSchema]);
 
-    useEffect(() => {
-        rhf.reset(initialData);
-    }, [rhf, initialData]);
-
     const pydanticFormComponents: PydanticFormComponents =
         getPydanticFormComponents(
             pydanticFormSchema?.properties || {},

frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx

@@ -178,6 +178,8 @@ function PydanticFormContextProvider({
     const rhf = useForm({
         resolver: zodResolver(zodSchema),
         mode: 'all',
+        defaultValues: initialData,
+        values: initialData,
     });
 
     const resetFormData = useCallback(