1 files changed, 39 insertions, 44 deletions

diff --git a/packages/web-util/src/forms/InputLine.tsx b/packages/web-util/src/forms/InputLine.tsx
index ee9150492..eb3238ef9 100644
--- a/packages/web-util/src/forms/InputLine.tsx
+++ b/packages/web-util/src/forms/InputLine.tsx
@@ -1,6 +1,6 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
-import { UIFormProps } from "./FormProvider.js";
+import { Addon, UIFormProps } from "./FormProvider.js";
 import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 import { useField } from "./useField.js";
 
@@ -68,6 +68,37 @@ export function LabelWithTooltipMaybeRequired({
   return WithTooltip;
 }
 
+export function RenderAddon({ disabled, addon }: { disabled?: boolean, addon: Addon }): VNode {
+  switch (addon.type) {
+    case "text": {
+      return (
+        <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
+          {addon.text}
+        </span>
+      );
+    }
+    case "icon": {
+      return (
+        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+          {addon.icon}
+        </div>
+      );
+    }
+    case "button": {
+      return (
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={addon.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"
+        >
+          {addon.children}
+        </button>
+      );
+    }
+  }
+}
+
 function InputWrapper<T extends object, K extends keyof T>({
   children,
   label,
@@ -91,47 +122,11 @@ function InputWrapper<T extends object, K extends keyof T>({
         tooltip={tooltip}
       />
       <div class="relative mt-2 flex rounded-md shadow-sm">
-        {before &&
-          (before.type === "text" ? (
-            <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
-              {before.text}
-            </span>
-          ) : before.type === "icon" ? (
-            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-              {before.icon}
-            </div>
-          ) : 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"
-            >
-              {before.children}
-            </button>
-          ) : undefined)}
+        {before && <RenderAddon disabled={disabled} addon={before} />}
 
         {children}
 
-        {after &&
-          (after.type === "text" ? (
-            <span class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
-              {after.text}
-            </span>
-          ) : after.type === "icon" ? (
-            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-              {after.icon}
-            </div>
-          ) : 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"
-            >
-              {after.children}
-            </button>
-          ) : undefined)}
+        {after && <RenderAddon disabled={disabled} addon={after} />}
       </div>
       {error && (
         <p class="mt-2 text-sm text-red-600" id="email-error">
@@ -259,13 +254,13 @@ export function InputLine<T extends object, K extends keyof T>(
         name={String(name)}
         type={type}
         onChange={(e) => {
-          onChange(e.currentTarget.value as any);
+          onChange(fromString(e.currentTarget.value));
         }}
         placeholder={placeholder ? placeholder : undefined}
-        value={value as string}
-        onBlur={() => {
-          onChange(fromString(value as any));
-        }}
+        value={toString(value) ?? ""}
+        // onBlur={() => {
+        //   onChange(fromString(value as any));
+        // }}
         // defaultValue={toString(value)}
         disabled={state.disabled}
         aria-invalid={showError}