Apply Safari number fixes to Percentage

src/components/fields/Percentage/EditorCell.tsx

@@ -2,7 +2,7 @@ import type { IEditorCellProps } from "@src/components/fields/types";
 import EditorCellTextField from "@src/components/Table/TableCell/EditorCellTextField";
 import { multiply100WithPrecision, divide100WithPrecision } from "./utils";
 
-export default function Percentage(props: IEditorCellProps<number>) {
+export default function Percentage(props: IEditorCellProps<number | string>) {
   return (
     <EditorCellTextField
       {...(props as any)}
@@ -13,7 +13,16 @@ export default function Percentage(props: IEditorCellProps<number>) {
           : props.value
       }
       onChange={(v) => {
-        props.onChange(divide100WithPrecision(Number(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 : divide100WithPrecision(Number(v));
+        props.onChange(parsedValue);
+      }}
+      onBlur={() => {
+        // Cast to number when the user has finished editing
+        props.onChange(Number(props.value));
+        props.onDirty();
       }}
     />
   );

src/components/fields/Percentage/SideDrawerField.tsx

@@ -11,16 +11,27 @@ export default function Percentage({
   onChange,
   onSubmit,
   disabled,
-}: ISideDrawerFieldProps) {
+}: ISideDrawerFieldProps<number | string>) {
   const { colors } = (column as any).config;
   const theme = useTheme();
   return (
     <TextField
       variant="filled"
       fullWidth
       margin="none"
-      onChange={(e) => onChange(Number(e.target.value) / 100)}
-      onBlur={onSubmit}
+      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) / 100;
+        onChange(parsedValue);
+      }}
+      onBlur={() => {
+        // Cast to number when the user has finished editing
+        onChange(Number(value));
+        onSubmit();
+      }}
       value={
         typeof value === "number" ? multiply100WithPrecision(value) : value
       }