2175: Temp fix for adding simple values to arrayItems

Author: Ruben van Leeuwen

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

@@ -1,6 +1,9 @@
 import React from 'react';
 
+import _ from 'lodash';
+
 import type { PydanticFormControlledElementProps } from '@/types';
+import { getFormFieldIdWithPath } from '@/utils';
 
 export const IntegerField = ({
     value,
@@ -9,6 +12,14 @@ export const IntegerField = ({
     disabled,
     pydanticFormField,
 }: PydanticFormControlledElementProps) => {
+    // If the field is part of an array the value is passed in as an object with the field name as key
+    // this is imposed by react-hook-form. We try to detect this and extract the actual value
+    const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
+    const fieldValue =
+        _.isObject(value) && _.has(value, fieldName)
+            ? _.get(value, fieldName)
+            : value;
+
     return (
         <input
             data-testid={pydanticFormField.id}
@@ -18,7 +29,7 @@ export const IntegerField = ({
                 onChange(value);
             }}
             disabled={disabled}
-            value={value}
+            value={fieldValue}
             type="number"
             style={{
                 padding: '8px',

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

@@ -5,27 +5,40 @@
  */
 import React from 'react';
 
+import _ from 'lodash';
+
 import { PydanticFormControlledElementProps } from '@/types';
+import { getFormFieldIdWithPath } from '@/utils';
 
 export const TextField = ({
     value,
     onChange,
     onBlur,
     disabled,
     pydanticFormField,
-}: PydanticFormControlledElementProps) => (
-    <input
-        data-testid={pydanticFormField.id}
-        onBlur={onBlur}
-        onChange={(t) => {
-            onChange(t.currentTarget.value);
-        }}
-        disabled={disabled}
-        value={value}
-        type="text"
-        style={{
-            padding: '8px',
-            margin: '8px 0',
-        }}
-    />
-);
+}: PydanticFormControlledElementProps) => {
+    // If the field is part of an array the value is passed in as an object with the field name as key
+    // this is imposed by react-hook-form. We try to detect this and extract the actual value
+    const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
+    const fieldValue =
+        _.isObject(value) && _.has(value, fieldName)
+            ? _.get(value, fieldName)
+            : value;
+
+    return (
+        <input
+            data-testid={pydanticFormField.id}
+            onBlur={onBlur}
+            onChange={(t) => {
+                onChange(t.currentTarget.value);
+            }}
+            disabled={disabled}
+            value={fieldValue}
+            type="text"
+            style={{
+                padding: '8px',
+                margin: '8px 0',
+            }}
+        />
+    );
+};

frontend/packages/pydantic-forms/src/utils.ts

@@ -127,7 +127,7 @@ export function getFormFieldValue(
  */
 export function getFormFieldIdWithPath(
     pydanticFormFieldId: PydanticFormField['id'],
-    fieldName: string,
+    fieldName?: string,
 ): string {
     const pathToParent = pydanticFormFieldId.split('.');
     pathToParent.pop();