feat: clean up number input detals

airjp73 · Jun 18, 2024 · c0db431 · c0db431
1 parent 931b6b9
commit c0db431
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/packages/core/src/dom/dom.ts b/packages/core/src/dom/dom.ts
@@ -1,10 +1,6 @@
-import { FormScope, FormStore } from "../form";
+import { FormStore } from "../form";
 import { getFieldValue } from "../getters";
-import { MultiValueMap } from "../native-form-data/MultiValueMap";
-import * as R from "remeda";
-import { FieldErrors } from "../types";
 import { getNextCheckboxValue } from "./getCheckboxChecked";
-import { RefStore } from "../store";
 
 export const setFormControlValue = (element: HTMLElement, value: unknown) => {
   if (element instanceof HTMLInputElement) {
@@ -18,7 +14,7 @@ export const setFormControlValue = (element: HTMLElement, value: unknown) => {
         element.checked = value === element.value;
         break;
       case "number":
-        if (value === undefined) element.value = "";
+        if (value == null || value === "") element.value = "";
         else element.valueAsNumber = Number(value);
         break;
       case "file":
@@ -36,14 +32,19 @@ export const setFormControlValue = (element: HTMLElement, value: unknown) => {
 
 export const getFormControlValue = (element: HTMLElement) => {
   if (element instanceof HTMLInputElement) {
-    switch (element.type) {
+    const input = element as HTMLInputElement;
+    switch (input.type) {
       case "checkbox":
       case "radio":
-        return element.checked;
+        return input.checked;
       case "number":
-        return element.valueAsNumber;
+        if (input.value === "") return null;
+        return input.valueAsNumber;
+      case "file":
+        if (input.multiple) return Array.from(input.files ?? []);
+        return input.files?.[0] ?? null;
       default:
-        return element.value;
+        return input.value;
     }
   }
 
@@ -171,17 +172,11 @@ export const getNextNativeValue = ({
   }
 
   if (element.type === "number") {
+    if (derivedValue == null || derivedValue === "") return null;
     if (typeof currentValue === "string") return String(derivedValue);
     return Number(derivedValue);
   }
 
-  if (element.type === "file") {
-    const input = element as HTMLInputElement;
-    const files = Array.from(input.files ?? []);
-    if (input.multiple) return files;
-    return files[0];
-  }
-
   return derivedValue;
 };
 

diff --git a/packages/react/src/test/input-types.test.tsx b/packages/react/src/test/input-types.test.tsx
@@ -58,8 +58,8 @@ describe("number inputs", () => {
 
     // Clearing the input
     await userEvent.clear(screen.getByTestId("age"));
-    expect(screen.getByTestId("age")).toHaveValue("");
-    expect(screen.getByTestId("age-value").textContent).toEqual("");
+    expect(screen.getByTestId("age")).toHaveValue(null);
+    expect(screen.getByTestId("age-value").textContent).toEqual("null");
   });
 
   it("default values set as strings", async () => {