From d59ccb66f310ad0b547b7e3f4f53081f624c20a6 Mon Sep 17 00:00:00 2001
From: Justin Bennett <git@just-be.dev>
Date: Tue, 14 Nov 2023 23:15:47 -0500
Subject: [PATCH] Change text field usages to number field

---
 app/components/form/fields/DiskSizeField.tsx | 1 -
 app/forms/firewall-rules-create.tsx          | 4 ++--
 app/forms/instance-create.tsx                | 7 +++----
 libs/ui/lib/number-input/NumberInput.tsx     | 1 +
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/components/form/fields/DiskSizeField.tsx b/app/components/form/fields/DiskSizeField.tsx
index 39afca5b3..2cb72254c 100644
--- a/app/components/form/fields/DiskSizeField.tsx
+++ b/app/components/form/fields/DiskSizeField.tsx
@@ -26,7 +26,6 @@ export function DiskSizeField<
   return (
     <NumberField
       units="GiB"
-      type="number"
       required={required}
       name={name}
       min={minSize}
diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx
index 59a0b4631..5b985c5f8 100644
--- a/app/forms/firewall-rules-create.tsx
+++ b/app/forms/firewall-rules-create.tsx
@@ -29,6 +29,7 @@ import {
   SideModalForm,
   TextField,
 } from 'app/components/form'
+import { NumberField } from 'app/components/form/fields/NumberField'
 import { useForm, useVpcSelector } from 'app/hooks'
 
 export type FirewallRuleValues = {
@@ -151,8 +152,7 @@ export const CommonFields = ({ error, control }: CommonFieldsProps) => {
 
       <FormDivider />
 
-      <TextField
-        type="number"
+      <NumberField
         name="priority"
         helpText="Must be 0&ndash;65535"
         required
diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
index 18c837e13..de3fc963c 100644
--- a/app/forms/instance-create.tsx
+++ b/app/forms/instance-create.tsx
@@ -50,6 +50,7 @@ import {
   TextField,
   type DiskTableItem,
 } from 'app/components/form'
+import { NumberField } from 'app/components/form/fields/NumberField'
 import { getProjectSelector, useForm, useProjectSelector, useToast } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
@@ -246,8 +247,7 @@ export function CreateInstanceForm() {
         </Tabs.Content>
 
         <Tabs.Content value="custom">
-          <TextField
-            type="number"
+          <NumberField
             required
             label="CPUs"
             name="ncpus"
@@ -263,9 +263,8 @@ export function CreateInstanceForm() {
               }
             }}
           />
-          <TextField
+          <NumberField
             units="GiB"
-            type="number"
             required
             label="Memory"
             name="memory"
diff --git a/libs/ui/lib/number-input/NumberInput.tsx b/libs/ui/lib/number-input/NumberInput.tsx
index a1c0bc356..9114c503f 100644
--- a/libs/ui/lib/number-input/NumberInput.tsx
+++ b/libs/ui/lib/number-input/NumberInput.tsx
@@ -46,6 +46,7 @@ export const NumberInput = React.forwardRef<
       {...groupProps}
     >
       <input
+        type="number"
         {...inputProps}
         ref={mergeRefs([forwardedRef, inputRef])}
         className={cn(