Updated <Input type="number" /> behavior to result in the same behavior as <Input number />

Author: calebjacob

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": {

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" />
 ```
 

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" />;