1 files changed, 49 insertions, 9 deletions

diff --git a/packages/web-util/src/forms/InputArray.tsx b/packages/web-util/src/forms/InputArray.tsx
index 7d9a1b378..d90028508 100644
--- a/packages/web-util/src/forms/InputArray.tsx
+++ b/packages/web-util/src/forms/InputArray.tsx
@@ -71,6 +71,14 @@ function Option({
   );
 }
 
+export function noHandlerPropsAndNoContextForField(
+  field: string | number | symbol,
+): never {
+  throw Error(
+    `Field ${field.toString()} doesn't have handler and is not in a form provider context.`,
+  );
+}
+
 export function InputArray<T extends object, K extends keyof T>(
   props: {
     fields: UIFormField[];
@@ -78,12 +86,20 @@ export function InputArray<T extends object, K extends keyof T>(
   } & UIFormProps<T, K>,
 ): VNode {
   const { fields, labelField, name, label, required, tooltip } = props;
-  const { value, onChange, state } = useField<T, K>(name);
+  // const { value, onChange, state } = useField<T, K>(name);
+  //FIXME: remove deprecated
+  const fieldCtx = useField<T, K>(props.name);
+  if (!props.handler && !fieldCtx) {
+    throw Error("");
+  }
+  const { value, onChange, state } =
+    props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name);
+
   const list = (value ?? []) as Array<Record<string, string | undefined>>;
   const [selectedIndex, setSelected] = useState<number | undefined>(undefined);
   const selected =
     selectedIndex === undefined ? undefined : list[selectedIndex];
-
+    
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -94,9 +110,11 @@ 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}
               disabled={selectedIndex !== undefined && selectedIndex !== idx}
@@ -107,7 +125,7 @@ export function InputArray<T extends object, K extends keyof T>(
             />
           );
         })}
-        {!state.disabled &&
+        {!state.disabled && (
           <div class="pt-2">
             <Option
               label={"Add..." as TranslatedString}
@@ -124,7 +142,7 @@ export function InputArray<T extends object, K extends keyof T>(
               }}
             />
           </div>
-        }
+        )}
       </div>
       {selectedIndex !== undefined && (
         /**
@@ -140,18 +158,19 @@ 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 state.elements[selectedIndex];
+            return {};
           }}
           onSubmit={(v) => {
             const newValue = [...list];
             newValue.splice(selectedIndex, 1, v);
-            onChange(newValue as T[K]);
+            onChange(newValue as any);
             setSelected(undefined);
           }}
           onUpdate={(v) => {
             const newValue = [...list];
             newValue.splice(selectedIndex, 1, v);
-            onChange(newValue as T[K]);
+            onChange(newValue as any);
           }}
         >
           <div class="px-4 py-6">
@@ -170,7 +189,7 @@ export function InputArray<T extends object, K extends keyof T>(
                 onClick={() => {
                   const newValue = [...list];
                   newValue.splice(selectedIndex, 1);
-                  onChange(newValue as T[K]);
+                  onChange(newValue as any);
                   setSelected(undefined);
                 }}
                 class="block rounded-md bg-red-600 px-3 py-2 text-center text-sm  text-white shadow-sm hover:bg-red-500 "
@@ -184,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);
+}
+
+