1 files changed, 18 insertions, 9 deletions
diff --git a/packages/web-util/src/forms/InputSelectOne.tsx b/packages/web-util/src/forms/InputSelectOne.tsx
index d100b079d..26f887b08 100644
--- a/packages/web-util/src/forms/InputSelectOne.tsx
+++ b/packages/web-util/src/forms/InputSelectOne.tsx
@@ -4,27 +4,35 @@ import { UIFormProps } from "./FormProvider.js";
 import { ChoiceS } from "./InputChoiceStacked.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 
 export function InputSelectOne<T extends object, K extends keyof T>(
   props: {
     choices: ChoiceS<T[K]>[];
   } & UIFormProps<T, K>,
 ): VNode {
-  const { name, label, choices, placeholder, tooltip, required } = props;
-  const { value, onChange } = useField<T, K>(name);
+  const { label, choices, placeholder, tooltip, required } = props;
+  //FIXME: remove deprecated
+  const fieldCtx = useField<T, K>(props.name);
+  const { value, onChange } =
+    props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name);
+
 
   const [filter, setFilter] = useState<string | undefined>(undefined);
   const regex = new RegExp(`.*${filter}.*`, "i");
-  const choiceMap = choices.reduce((prev, curr) => {
-    return { ...prev, [curr.value as string]: curr.label };
-  }, {} as Record<string, string>);
+  const choiceMap = choices.reduce(
+    (prev, curr) => {
+      return { ...prev, [curr.value as string]: curr.label };
+    },
+    {} as Record<string, string>,
+  );
 
   const filteredChoices =
     filter === undefined
       ? undefined
       : choices.filter((v) => {
-        return regex.test(v.label);
-      });
+          return regex.test(v.label);
+        });
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -97,15 +105,16 @@ export function InputSelectOne<T extends object, K extends keyof T>(
               {filteredChoices.map((v, idx) => {
                 return (
                   <li
+                    key={idx}
                     class="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
                     id="option-0"
                     role="option"
                     onClick={() => {
                       setFilter(undefined);
-                      onChange(v.value as T[K]);
+                      onChange(v.value as any);
                     }}
 
-                  // tabindex="-1"
+                    // tabindex="-1"
                   >
                     {/* <!-- Selected: "font-semibold" --> */}
                     <span class="block truncate">{v.label}</span>