1 files changed, 14 insertions, 11 deletions
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx b/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
index 32b16313d..8e847a273 100644
--- a/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
@@ -22,8 +22,8 @@ interface StringConverter<T> {
   fromStringUI: (v?: string) => T;
 }
 
-export interface UIFormProps<T> {
-  name: keyof T;
+export interface UIFormProps<T extends object, K extends keyof T> {
+  name: K;
   label: TranslatedString;
   placeholder?: TranslatedString;
   tooltip?: TranslatedString;
@@ -31,7 +31,7 @@ export interface UIFormProps<T> {
   before?: Addon;
   after?: Addon;
   required?: boolean;
-  converter?: StringConverter<T>;
+  converter?: StringConverter<T[K]>;
 }
 
 export type FormErrors<T> = {
@@ -102,7 +102,7 @@ export function LabelWithTooltipMaybeRequired({
   return WithTooltip;
 }
 
-function InputWrapper<T>({
+function InputWrapper<T extends object, K extends keyof T>({
   children,
   label,
   tooltip,
@@ -111,7 +111,7 @@ function InputWrapper<T>({
   help,
   error,
   required,
-}: { error?: string; children: ComponentChildren } & UIFormProps<T>): VNode {
+}: { error?: string; children: ComponentChildren } & UIFormProps<T, K>): VNode {
   return (
     <div class="sm:col-span-6">
       <LabelWithTooltipMaybeRequired
@@ -181,13 +181,13 @@ function defaultFromString(v: string) {
   return v;
 }
 
-type InputType = "text" | "text-area" | "password" | "email";
+type InputType = "text" | "text-area" | "password" | "email" | "number";
 
-export function InputLine<T>(
-  props: { type: InputType } & UIFormProps<T>,
+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(name);
+  const { value, onChange, state, isDirty } = useField<T, K>(name);
 
   if (state.hidden) return <div />;
 
@@ -239,7 +239,10 @@ export function InputLine<T>(
 
   if (type === "text-area") {
     return (
-      <InputWrapper<T> {...props} error={showError ? state.error : undefined}>
+      <InputWrapper<T, K>
+        {...props}
+        error={showError ? state.error : undefined}
+      >
         <textarea
           rows={4}
           name={String(name)}
@@ -258,7 +261,7 @@ export function InputLine<T>(
   }
 
   return (
-    <InputWrapper<T> {...props} error={showError ? state.error : undefined}>
+    <InputWrapper<T, K> {...props} error={showError ? state.error : undefined}>
       <input
         name={String(name)}
         type={type}