1 files changed, 20 insertions, 10 deletions
diff --git a/packages/web-util/src/forms/InputLine.tsx b/packages/web-util/src/forms/InputLine.tsx
index b8879f9ec..c7f69dd8a 100644
--- a/packages/web-util/src/forms/InputLine.tsx
+++ b/packages/web-util/src/forms/InputLine.tsx
@@ -3,6 +3,7 @@ import { ComponentChildren, Fragment, VNode, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { UIFormProps } from "./FormProvider.js";
 import { useField } from "./useField.js";
+import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 
 //@ts-ignore
 const TooltipIcon = (
@@ -78,7 +79,11 @@ function InputWrapper<T extends object, K extends keyof T>({
   error,
   disabled,
   required,
-}: { error?: string; disabled: boolean, children: ComponentChildren } & UIFormProps<T, K>): VNode {
+}: {
+  error?: string;
+  disabled: boolean;
+  children: ComponentChildren;
+} & UIFormProps<T, K>): VNode {
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -156,19 +161,22 @@ export function InputLine<T extends object, K extends keyof T>(
   props: { type: InputType } & UIFormProps<T, K>,
 ): VNode {
   const { name, placeholder, before, after, converter, type } = props;
-  const { value, onChange, state, isDirty } = useField<T, K>(name);
+  //FIXME: remove deprecated
+  const fieldCtx = useField<T, K>(props.name);
+  const { value, onChange, state } =
+    props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name);
 
-  const [text, setText] = useState("")
+  const [text, setText] = useState("");
   const fromString: (s: string) => any =
     converter?.fromStringUI ?? defaultFromString;
   const toString: (s: any) => string = converter?.toStringUI ?? defaultToString;
 
   useEffect(() => {
-    const newValue = toString(value)
+    const newValue = toString(value);
     if (newValue) {
-      setText(newValue)
+      setText(newValue);
     }
-  }, [value])
+  }, [value]);
 
   if (state.hidden) return <div />;
 
@@ -206,7 +214,7 @@ export function InputLine<T extends object, K extends keyof T>(
       }
     }
   }
-  const showError = isDirty && state.error;
+  const showError = value !== undefined && state.error;
   if (showError) {
     clazz +=
       " text-red-900 ring-red-300  placeholder:text-red-300 focus:ring-red-500";
@@ -242,15 +250,17 @@ export function InputLine<T extends object, K extends keyof T>(
   }
 
   return (
-    <InputWrapper<T, K> {...props}
+    <InputWrapper<T, K>
+      {...props}
       help={props.help ?? state.help}
-      disabled={state.disabled ?? false} error={showError ? state.error : undefined}
+      disabled={state.disabled ?? false}
+      error={showError ? state.error : undefined}
     >
       <input
         name={String(name)}
         type={type}
         onChange={(e) => {
-          setText(e.currentTarget.value)
+          setText(e.currentTarget.value);
         }}
         placeholder={placeholder ? placeholder : undefined}
         value={text}