From 8fd8cbae26d1fe05847b7f84ed0be228c7f3dbc8 Mon Sep 17 00:00:00 2001
From: Mohammad Shehadeh <mshehadeh@avertra.com>
Date: Thu, 3 Apr 2025 15:58:01 +0300
Subject: [PATCH 1/2] fix ArrayField to handle values type array correctly

---
 .../components/form/fields/ArrayField.tsx          | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx b/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
index 2c3778c..7ba0364 100644
--- a/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
+++ b/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
@@ -36,6 +36,8 @@ export function ArrayField({
   // the form state changes.
   const watch = useWatch({ control });
 
+  const arrayValue = "json" in field.value ? field.value.json : field.value;
+
   function getValueFromWatch() {
     let r = watch;
     for (const p of [ROOT_VALS_PROPERTY_NAME].concat(
@@ -48,13 +50,15 @@ export function ArrayField({
 
   function onAddClick() {
     setTextFieldKeys((old) => old.concat([`${currentKeyCount++}`]));
-    field.onChange(
-      getValueFromWatch().concat([defaultFormValuesForNode(node.childType)]),
-    );
+    const watchValue = getValueFromWatch();
+    const arrayValue = "json" in watchValue ? watchValue.json : watchValue;
+    field.onChange(arrayValue.concat([defaultFormValuesForNode(node.childType)]));
   }
 
   function onDeleteClick(index: number) {
-    const newArr = [...getValueFromWatch()];
+    const watchValue = getValueFromWatch();
+    const arrayValue = "json" in watchValue ? watchValue.json : watchValue;
+    const newArr = [...arrayValue];
     const newKeysArr = [...textFieldKeys];
     newArr.splice(index, 1);
     newKeysArr.splice(index, 1);
@@ -66,7 +70,7 @@ export function ArrayField({
       iconElement={<DataArray className="mr-1" />}
       title={label}
     >
-      {field.value.map((parsedNode: ParsedInputNode, i: number) => (
+      {arrayValue.map((parsedNode: ParsedInputNode, i: number) => (
         <span
           key={`${JSON.stringify(parsedNode)} ${i}`}
           className="flex flex-row items-start"

From 61e0b7b9427d79f4f75425cec991b44f1a328e47 Mon Sep 17 00:00:00 2001
From: Mohammad Shehadeh <mshehadeh@avertra.com>
Date: Thu, 24 Apr 2025 10:38:50 +0300
Subject: [PATCH 2/2] fix: biome check

---
 .../src/react-app/components/form/fields/ArrayField.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx b/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
index 7ba0364..c7ae6c7 100644
--- a/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
+++ b/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
@@ -52,7 +52,9 @@ export function ArrayField({
     setTextFieldKeys((old) => old.concat([`${currentKeyCount++}`]));
     const watchValue = getValueFromWatch();
     const arrayValue = "json" in watchValue ? watchValue.json : watchValue;
-    field.onChange(arrayValue.concat([defaultFormValuesForNode(node.childType)]));
+    field.onChange(
+      arrayValue.concat([defaultFormValuesForNode(node.childType)]),
+    );
   }
 
   function onDeleteClick(index: number) {