Merge pull request #141 from workfloworchestrator/2076-test-findings

2076 Fixes getting default values

Author: DutchBen

frontend/.changeset/short-groups-roll.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Fixes getting default values

frontend/package-lock.json

@@ -101,8 +101,8 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             // We are looking for a single value from a set list of options. With less than 4 options, use radio buttons.
             return (
                 field.type === PydanticFormFieldType.STRING &&
-                field.options.length > 0 &&
-                field.options.length <= 3
+                field.options?.length > 0 &&
+                field.options?.length <= 3
             );
         },
     },
@@ -116,7 +116,7 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
             // We are looking for a single value from a set list of options. With more than 3 options, use a dropdown.
             return (
                 field.type === PydanticFormFieldType.STRING &&
-                field.options.length >= 4
+                field.options?.length >= 4
             );
         },
     },
@@ -139,8 +139,8 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
         matcher(field) {
             return (
                 field.type === PydanticFormFieldType.ARRAY &&
-                field.options.length > 0 &&
-                field.options.length <= 5
+                field.options?.length > 0 &&
+                field.options?.length <= 5
             );
         },
         validator: zodValidationPresets.multiSelect,
@@ -153,7 +153,7 @@ const defaultComponentMatchers: PydanticComponentMatcher[] = [
         },
         matcher(field) {
             return (
-                field.options.length > 0 &&
+                field.options?.length > 0 &&
                 field.type === PydanticFormFieldType.ARRAY
             );
         },

frontend/packages/pydantic-forms/src/components/defaultComponentMatchers.ts

@@ -28,7 +28,10 @@ export const ObjectField = ({
             }}
         >
             <h1>{pydanticFormField.title}</h1>
-            <RenderFields pydanticFormComponents={components} />
+            <RenderFields
+                pydanticFormComponents={components}
+                idPrefix={pydanticFormField.id}
+            />
         </div>
     );
 };

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

@@ -12,11 +12,13 @@ import { PydanticFormComponents, PydanticFormField } from '@/types';
 interface RenderFieldsProps {
     pydanticFormComponents: PydanticFormComponents;
     extraTriggerFields?: string[]; // The use case for this is that we want to trigger the array field aswell as the array item field
+    idPrefix?: string; // This is used to prefix the id of the field for nested fields
 }
 
 export function RenderFields({
     pydanticFormComponents,
     extraTriggerFields,
+    idPrefix = '',
 }: RenderFieldsProps) {
     return pydanticFormComponents.map((component) => {
         const { Element, isControlledElement } = component.Element;
@@ -27,23 +29,24 @@ export function RenderFields({
             return undefined;
         }
 
+        const field = {
+            ...pydanticFormField,
+            id: idPrefix
+                ? `${idPrefix}.${pydanticFormField.id}`
+                : pydanticFormField.id,
+        };
         if (isControlledElement) {
             return (
-                <div css={{ width: '100%' }} key={pydanticFormField.id}>
+                <div css={{ width: '100%' }} key={field.id}>
                     <WrapFieldElement
                         PydanticFormControlledElement={Element}
-                        pydanticFormField={pydanticFormField}
+                        pydanticFormField={field}
                         extraTriggerFields={extraTriggerFields}
                     />
                 </div>
             );
         } else {
-            return (
-                <Element
-                    pydanticFormField={pydanticFormField}
-                    key={pydanticFormField.id}
-                />
-            );
+            return <Element pydanticFormField={field} key={field.id} />;
         }
     });
 }

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

@@ -9,6 +9,7 @@ import React, {
     createContext,
     useCallback,
     useEffect,
+    useMemo,
     useRef,
     useState,
 } from 'react';
@@ -157,14 +158,21 @@ function PydanticFormContextProvider({
         componentMatcherExtender,
     );
 
-    const initialData = getFormValuesFromFieldOrLabels(
-        pydanticFormSchema,
-        {
-            ...formLabels?.data,
-            ...customData,
-        },
+    const initialData = useMemo(() => {
+        return getFormValuesFromFieldOrLabels(
+            pydanticFormSchema?.properties,
+            {
+                ...formLabels?.data,
+                ...customData,
+            },
+            componentMatcherExtender,
+        );
+    }, [
         componentMatcherExtender,
-    );
+        customData,
+        formLabels?.data,
+        pydanticFormSchema?.properties,
+    ]);
 
     // initialize the react-hook-form
     const rhf = useForm({