From 20052b61ecf53f9f4de252438b1933ac928f7e4c Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Wed, 6 Apr 2022 22:48:06 -0500
Subject: [PATCH] AmountInput: filter non-numeric, show numeric keyboard on ios

---
 web/components/amount-input.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index f0a64a6b..3ea4d2d9 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -35,16 +35,9 @@ export function AmountInput(props: {
   } = props
 
   const onAmountChange = (str: string) => {
-    if (str.includes('-')) {
-      onChange(undefined)
-      return
-    }
-    const amount = parseInt(str.replace(/[^\d]/, ''))
-
-    if (str && isNaN(amount)) return
-    if (amount >= 10 ** 9) return
-
-    onChange(str ? amount : undefined)
+    const amount = parseInt(str.replace(/\D/g, ''))
+    const isInvalid = !str || isNaN(amount)
+    onChange(isInvalid ? undefined : amount)
   }
 
   return (
@@ -58,9 +51,11 @@ export function AmountInput(props: {
             inputClassName
           )}
           ref={inputRef}
-          type="number"
+          type="text"
+          pattern="[0-9]*"
+          inputMode="numeric"
           placeholder="0"
-          maxLength={9}
+          maxLength={6}
           value={amount ?? ''}
           disabled={disabled}
           onChange={(e) => onAmountChange(e.target.value)}