From 65686d80e0b4201312a0ecf611204a7eefc440ef Mon Sep 17 00:00:00 2001
From: Rob Jackson <rob@rjackson.me>
Date: Sun, 14 May 2023 13:30:44 +0100
Subject: [PATCH] Fix number inputs on SideDrawerField

---
 src/components/fields/Number/EditorCell.tsx      | 14 ++++++++++++--
 src/components/fields/Number/SideDrawerField.tsx | 11 +++++++++--
 src/components/fields/types.ts                   |  2 +-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/fields/Number/EditorCell.tsx b/src/components/fields/Number/EditorCell.tsx
index 68bd7d6e..0fae3291 100644
--- a/src/components/fields/Number/EditorCell.tsx
+++ b/src/components/fields/Number/EditorCell.tsx
@@ -1,8 +1,18 @@
 import type { IEditorCellProps } from "@src/components/fields/types";
 import EditorCellTextField from "@src/components/Table/TableCell/EditorCellTextField";
 
-export default function Number_(props: IEditorCellProps<number>) {
+export default function Number_(props: IEditorCellProps<number | string>) {
   return (
-    <EditorCellTextField {...(props as any)} InputProps={{ type: "number" }} />
+    <EditorCellTextField
+      {...(props as any)}
+      InputProps={{ type: "number" }}
+      onChange={(v) => {
+        // Safari/Firefox gives us an empty string for invalid inputs, which includes inputs like "12." on the way to
+        // typing "12.34". Number would cast these to 0 and replace the user's input to 0 whilst they're mid-way through
+        // typing. We want to avoid that.
+        const parsedValue = v === "" ? v : Number(v);
+        props.onChange(parsedValue);
+      }}
+    />
   );
 }
diff --git a/src/components/fields/Number/SideDrawerField.tsx b/src/components/fields/Number/SideDrawerField.tsx
index 0b27556e..cd3f41d0 100644
--- a/src/components/fields/Number/SideDrawerField.tsx
+++ b/src/components/fields/Number/SideDrawerField.tsx
@@ -9,13 +9,20 @@ export default function Number_({
   onChange,
   onSubmit,
   disabled,
-}: ISideDrawerFieldProps) {
+}: ISideDrawerFieldProps<number | string>) {
   return (
     <TextField
       variant="filled"
       fullWidth
       margin="none"
-      onChange={(e) => onChange(Number(e.target.value))}
+      onChange={(e) => {
+        // Safari/Firefox gives us an empty string for invalid inputs, which includes inputs like "12." on the way to
+        // typing "12.34". Number would cast these to 0 and replace the user's input to 0 whilst they're mid-way through
+        // typing. We want to avoid that.
+        const parsedValue =
+          e.target.value === "" ? e.target.value : Number(e.target.value);
+        onChange(parsedValue);
+      }}
       onBlur={onSubmit}
       value={value}
       id={getFieldId(column.key)}
diff --git a/src/components/fields/types.ts b/src/components/fields/types.ts
index a11e1e10..2d0cdb66 100644
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -86,7 +86,7 @@ export interface ISideDrawerFieldProps<T = any> {
   /** Call when the user has input but changes have not been saved */
   onDirty: (dirty?: boolean) => void;
   /** Update the local value. Also calls onDirty */
-  onChange: (T: any) => void;
+  onChange: (value: T) => void;
   /** Call when user input is ready to be saved (e.g. onBlur) */
   onSubmit: () => void;