1 files changed, 11 insertions, 16 deletions
diff --git a/packages/web-util/src/forms/InputChoiceHorizontal.tsx b/packages/web-util/src/forms/InputChoiceHorizontal.tsx
index 778b73c75..86d3aa926 100644
--- a/packages/web-util/src/forms/InputChoiceHorizontal.tsx
+++ b/packages/web-util/src/forms/InputChoiceHorizontal.tsx
@@ -3,6 +3,7 @@ import { Fragment, VNode, h } from "preact";
 import { UIFormProps } from "./FormProvider.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 
 export interface ChoiceH<V> {
   label: TranslatedString;
@@ -11,22 +12,14 @@ export interface ChoiceH<V> {
 
 export function InputChoiceHorizontal<T extends object, K extends keyof T>(
   props: {
-    choices: ChoiceH<T[K]>[];
+    choices: ChoiceH<string>[];
   } & UIFormProps<T, K>,
 ): VNode {
-  const {
-    choices,
-    name,
-    label,
-    tooltip,
-    help,
-    placeholder,
-    required,
-    before,
-    after,
-    converter,
-  } = props;
-  const { value, onChange, state, isDirty } = useField<T, K>(name);
+  const { choices, label, tooltip, help, required, converter } = props;
+  //FIXME: remove deprecated
+  const fieldCtx = useField<T, K>(props.name);
+  const { value, onChange, state } =
+    props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name);
   if (state.hidden) {
     return <Fragment />;
   }
@@ -41,11 +34,12 @@ export function InputChoiceHorizontal<T extends object, K extends keyof T>(
       <fieldset class="mt-2">
         <div class="isolate inline-flex rounded-md shadow-sm">
           {choices.map((choice, idx) => {
+            const convertedValue = converter?.fromStringUI(choice.value as any)
             const isFirst = idx === 0;
             const isLast = idx === choices.length - 1;
             let clazz =
               "relative inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300  focus:z-10";
-            if (choice.value === value) {
+            if (convertedValue !== undefined && convertedValue === value) {
               clazz +=
                 " text-white bg-indigo-600 hover:bg-indigo-500 ring-2 ring-indigo-600 hover:ring-indigo-500";
             } else {
@@ -62,12 +56,13 @@ export function InputChoiceHorizontal<T extends object, K extends keyof T>(
             return (
               <button
                 type="button"
+                key={idx}
                 disabled={state.disabled}
                 label={choice.label}
                 class={clazz}
                 onClick={(e) => {
                   onChange(
-                    (value === choice.value ? undefined : choice.value) as T[K],
+                    (value === choice.value ? undefined : convertedValue) as any,
                   );
                 }}
               >