1 files changed, 25 insertions, 3 deletions
diff --git a/packages/web-util/src/forms/InputArray.tsx b/packages/web-util/src/forms/InputArray.tsx
index 1ac96437c..d90028508 100644
--- a/packages/web-util/src/forms/InputArray.tsx
+++ b/packages/web-util/src/forms/InputArray.tsx
@@ -99,7 +99,7 @@ export function InputArray<T extends object, K extends keyof T>(
   const [selectedIndex, setSelected] = useState<number | undefined>(undefined);
   const selected =
     selectedIndex === undefined ? undefined : list[selectedIndex];
-
+    
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -110,9 +110,10 @@ export function InputArray<T extends object, K extends keyof T>(
 
       <div class="-space-y-px rounded-md bg-white ">
         {list.map((v, idx) => {
+          const label = getValueDeeper(v, labelField.split("."))
           return (
             <Option
-              label={v[labelField] as TranslatedString}
+              label={label as TranslatedString}
               key={idx}
               isSelected={selectedIndex === idx}
               isLast={idx === list.length - 1}
@@ -158,7 +159,7 @@ export function InputArray<T extends object, K extends keyof T>(
             // elements should be present in the state object since this is expected to be an array
             //@ts-ignore
             // return state.elements[selectedIndex];
-            return {}
+            return {};
           }}
           onSubmit={(v) => {
             const newValue = [...list];
@@ -202,3 +203,24 @@ export function InputArray<T extends object, K extends keyof T>(
     </div>
   );
 }
+
+
+
+export function getValueDeeper(
+  object: Record<string, any>,
+  names: string[],
+): string {
+  if (names.length === 0) {
+    return object as any as string;
+  }
+  const [head, ...rest] = names;
+  if (!head) {
+    return getValueDeeper(object, rest);
+  }
+  if (object === undefined) {
+    return ""
+  }
+  return getValueDeeper(object[head], rest);
+}
+
+