Fix number inputs on SideDrawerField

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);
+      }}
+    />
   );
 }

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)}

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;