fix(form): better blur error cases for useNumberField

Author: mlaursen

packages/form/src/text-field/__tests__/useNumberField.tsx

@@ -162,6 +162,37 @@ describe("useNumberField", () => {
       fireEvent.blur(field);
       expect(field.value).toBe("100");
     });
+
+    it("should set the value to the min or defaultValue on blur if there is no value in the text field", () => {
+      const { getByRole, rerender } = render(<NumberField defaultValue={1} />);
+      const field = getByRole("spinbutton") as HTMLInputElement;
+      expect(field.value).toBe("1");
+
+      fireEvent.focus(field);
+      fireEvent.blur(field);
+      expect(field.value).toBe("1");
+
+      userEvent.type(field, "00");
+      expect(field.value).toBe("100");
+
+      userEvent.clear(field);
+      fireEvent.blur(field);
+      expect(field.value).toBe("1");
+
+      rerender(<NumberField min={0} defaultValue={1} />);
+      expect(field.value).toBe("1");
+
+      fireEvent.focus(field);
+      fireEvent.blur(field);
+      expect(field.value).toBe("1");
+
+      userEvent.type(field, "00");
+      expect(field.value).toBe("100");
+
+      userEvent.clear(field);
+      fireEvent.blur(field);
+      expect(field.value).toBe("0");
+    });
   });
 
   describe("number change behavior", () => {

packages/form/src/text-field/useNumberField.ts

@@ -262,11 +262,18 @@ export function useNumberField({
         return;
       }
 
+      let value = input.valueAsNumber;
+      if (input.value === "" && typeof initial.current === "number") {
+        value = min ?? initial.current;
+      }
+
       // can't have both rangeUnderflow and rangeOverflow at the same time, so
-      // it's "safe" to alwaays provide both
-      const value = withinRange(input.valueAsNumber, min, max);
-      setNumber(value);
-      input.value = `${value}`;
+      // it's "safe" to always provide both
+      value = withinRange(value, min, max);
+      if (!Number.isNaN(value)) {
+        setNumber(value);
+        input.value = `${value}`;
+      }
     },
     [onBlur, fixOnBlur, min, max]
   );