From 16d561d5c51fc21b2c08e8eaca2d405a1d1bfaf8 Mon Sep 17 00:00:00 2001
From: Caleb Jacob <thecalebjacob@gmail.com>
Date: Fri, 31 Jan 2025 09:30:12 -0700
Subject: [PATCH] Updated <Input type="number" /> behavior to result in the
 same behavior as <Input number />

---
 package.json                   |  2 +-
 src/components/Input.README.md |  4 ++--
 src/components/Input.tsx       | 13 +++++++++++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 70e14d7..6e992ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {
diff --git a/src/components/Input.README.md b/src/components/Input.README.md
index ac8cf6f..ccfd8a3 100644
--- a/src/components/Input.README.md
+++ b/src/components/Input.README.md
@@ -20,10 +20,10 @@ This will apply a default search icon on the left and fully rounded corners. The
 
 ## Number
 
-By default, an input will emit a `string` value. However, you can use the `number` prop to emit a `number` value and configure if decimal or negative numbers are allowed.
+By default, an input will emit a `string` value. However, you can use `type="number"` or the `number` prop to emit a `number` value and configure if decimal or negative numbers are allowed.
 
 ```tsx
-<Input label="My Number" number name="myInput" />
+<Input label="My Number" type="number" name="myInput" />
 <Input label="My Number" number={{allowDecimal: false, allowNegative: false}} name="myInput" />
 ```
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 428e7c4..323b232 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -39,14 +39,23 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       right,
       style,
       success,
-      type = 'text',
       ...props
     },
     ref,
   ) => {
-    const isNumber = Boolean(number);
+    const isNumber = Boolean(number) || props.type === 'number';
     const assistiveTextId = `${name}-assistive-text`;
     const variant: ThemeInputVariant = error ? 'error' : success ? 'success' : 'default';
+    let type = props.type || 'text';
+
+    if (isNumber) {
+      /*
+        A native number input (<input type="number" />) has all kinds of issues and limitations. 
+        We can combine <input type="text" input-mode="decimal" /> with numberInputHandler() for 
+        a better experience (DX and UX).
+      */
+      type = 'text';
+    }
 
     if (type === 'search' && !iconLeft) {
       iconLeft = <MagnifyingGlass weight="bold" />;