standard Amount field and add more validation (neg values)

3 files changed, 32 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx
index 1c1f5cc49..7c6eb40a2 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.tsx
+++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx
@@ -40,7 +40,9 @@ export interface Props {
   minRows?: number;
   multiline?: boolean;
   onChange?: (s: string) => void;
+  onInput?: (s: string) => string;
   min?: string;
+  step?: string;
   placeholder?: string;
   required?: boolean;
 
diff --git a/packages/taler-wallet-webextension/src/mui/handlers.ts b/packages/taler-wallet-webextension/src/mui/handlers.ts
index aa66e75a8..9d393e5b7 100644
--- a/packages/taler-wallet-webextension/src/mui/handlers.ts
+++ b/packages/taler-wallet-webextension/src/mui/handlers.ts
@@ -16,7 +16,7 @@
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 
 export interface TextFieldHandler {
-  onInput: (value: string) => Promise<void>;
+  onInput?: (value: string) => Promise<void>;
   value: string;
   error?: string;
 }
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index 80f5bd44e..e1c6e7af1 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -189,6 +189,7 @@ export function InputBase({
   Root = InputBaseRoot,
   Input,
   onChange,
+  onInput,
   name,
   placeholder,
   readOnly,
@@ -254,6 +255,19 @@ export function InputBase({
     }
   };
 
+  const handleInput = (
+    event: JSX.TargetedEvent<HTMLElement & { value?: string }>,
+  ): void => {
+    // if (inputPropsProp.onChange) {
+    //   inputPropsProp.onChange(event, ...args);
+    // }
+
+    // Perform in the willUpdate
+    if (onInput) {
+      event.currentTarget.value = onInput(event.currentTarget.value);
+    }
+  };
+
   const handleClick = (
     event: JSX.TargetedMouseEvent<HTMLElement & { value?: string }>,
   ): void => {
@@ -290,6 +304,7 @@ export function InputBase({
           onKeyDown={onKeyDown}
           onKeyUp={onKeyUp}
           type={type}
+          onInput={handleInput}
           onChange={handleChange}
           onBlur={handleBlur}
           onFocus={handleFocus}
@@ -345,6 +360,7 @@ export function TextareaAutoSize({
   // disabled,
   // size,
   onChange,
+  onInput,
   value,
   multiline,
   focused,
@@ -480,7 +496,18 @@ export function TextareaAutoSize({
     }
 
     if (onChange) {
-      onChange(event);
+      onChange(event.target.value);
+    }
+  };
+  const handleInput = (event: any): void => {
+    renders.current = 0;
+
+    if (!isControlled) {
+      syncHeight();
+    }
+
+    if (onInput) {
+      event.currentTarget.value = onInput(event.currentTarget.value);
     }
   };
 
@@ -498,6 +525,7 @@ export function TextareaAutoSize({
         ].join(" ")}
         value={value}
         onChange={handleChange}
+        onInput={handleInput}
         ref={inputRef}
         // Apply the rows prop to get a "correct" first SSR paint
         rows={minRows}