1 files changed, 28 insertions, 8 deletions
diff --git a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx
index 9448ef5e4..f6c709d94 100644
--- a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx
@@ -1,6 +1,7 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
 import { useField } from "./useField.js";
+import { useEffect, useState } from "preact/hooks";
 
 export interface IconAddon {
   type: "icon";
@@ -80,7 +81,7 @@ export function LabelWithTooltipMaybeRequired({
       {Label}
       <span class="relative flex items-center group pl-2">
         {TooltipIcon}
-        <div class="absolute bottom-0 flex flex-col items-center hidden mb-6 group-hover:flex">
+        <div class="absolute bottom-0 flex flex-col items-center mb-6 group-hover:flex">
           <span class="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-black shadow-lg">
             {tooltip}
           </span>
@@ -110,8 +111,9 @@ function InputWrapper<T extends object, K extends keyof T>({
   after,
   help,
   error,
+  disabled,
   required,
-}: { error?: string; children: ComponentChildren } & UIFormProps<T, K>): VNode {
+}: { error?: string; disabled: boolean, children: ComponentChildren } & UIFormProps<T, K>): VNode {
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -132,6 +134,7 @@ function InputWrapper<T extends object, K extends keyof T>({
           ) : before.type === "button" ? (
             <button
               type="button"
+              disabled={disabled}
               onClick={before.onClick}
               class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-l-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
             >
@@ -153,6 +156,7 @@ function InputWrapper<T extends object, K extends keyof T>({
           ) : after.type === "button" ? (
             <button
               type="button"
+              disabled={disabled}
               onClick={after.onClick}
               class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
             >
@@ -189,6 +193,21 @@ export function InputLine<T extends object, K extends keyof T>(
   const { name, placeholder, before, after, converter, type } = props;
   const { value, onChange, state, isDirty } = useField<T, K>(name);
 
+  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)
+    if (newValue) {
+
+      setText(newValue)
+    } else {
+      console.log("invalid")
+    }
+  }, [value])
+
   if (state.hidden) return <div />;
 
   let clazz =
@@ -233,14 +252,12 @@ export function InputLine<T extends object, K extends keyof T>(
     clazz +=
       " text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-indigo-600";
   }
-  const fromString: (s: string) => any =
-    converter?.fromStringUI ?? defaultFromString;
-  const toString: (s: any) => string = converter?.toStringUI ?? defaultToString;
 
   if (type === "text-area") {
     return (
       <InputWrapper<T, K>
         {...props}
+        disabled={state.disabled}
         error={showError ? state.error : undefined}
       >
         <textarea
@@ -262,15 +279,18 @@ export function InputLine<T extends object, K extends keyof T>(
   }
 
   return (
-    <InputWrapper<T, K> {...props} error={showError ? state.error : undefined}>
+    <InputWrapper<T, K> {...props} disabled={state.disabled} error={showError ? state.error : undefined}>
       <input
         name={String(name)}
         type={type}
         onChange={(e) => {
-          onChange(fromString(e.currentTarget.value));
+          setText(e.currentTarget.value)
         }}
         placeholder={placeholder ? placeholder : undefined}
-        value={toString(value) ?? ""}
+        value={text}
+        onBlur={() => {
+          onChange(fromString(text));
+        }}
         // defaultValue={toString(value)}
         disabled={state.disabled}
         aria-invalid={showError}