Merge pull request #37 from iway1/bug/number-field-0-and-negative

Number fields now allow leading minus sign and 0
iway1 · Jan 14, 2023 · 3dfc065 · 3dfc065
2 parents 3ee4bdf + 90df6ea
commit 3dfc065
Showing 1 changed file with 6 additions and 13 deletions.
diff --git a/packages/trpc-panel/src/react-app/components/form/fields/NumberField.tsx b/packages/trpc-panel/src/react-app/components/form/fields/NumberField.tsx
@@ -22,25 +22,18 @@ export function NumberField({
   });
 
   function onChange(value: string) {
-    if (value == "") {
-      setStringValue("");
-      return;
-    }
-    const numberValue = parseFloat(value);
-    if (isNaN(numberValue)) return;
-    setStringValue(numberValue + (value[value.length - 1] == "." ? "." : ""));
+    setStringValue(value.replace(/[^\d.-]/g, ""));
   }
 
   useEffect(() => {
-    // Not sure how else to do this while still allowing users to input a decimal point
+    const parsed = parseFloat(stringValue);
+    if (isNaN(parsed)) {
+      field.onChange(undefined);
+      return;
+    }
     field.onChange(parseFloat(stringValue));
   }, [stringValue]);
 
-  // ¯\_(ツ)_/¯
-  useEffect(() => {
-    if (!field.value) setStringValue("");
-  }, [field.value]);
-
   return (
     <BaseTextField
       onChange={onChange}