fix: Number fields validation (#19)

* fix: Number fields validation

* chore: Remove console calls

Author: ganlhi

packages/react-forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heetch/react-forms",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "author": "Heetch",
   "devDependencies": {

packages/react-forms/src/lib/form-field-number-renderer/form-field-number-renderer.stories.tsx

@@ -102,8 +102,8 @@ _tests.play = async () => {
   const input: HTMLInputElement = screen.getByLabelText('Amount', {
     selector: 'input',
   });
-  await userEvent.type(input, '1. ', { delay: 50 });
-  expect(input).toHaveStyle({ color: '#cd2703' });
-  await userEvent.type(input, '1.5 ', { delay: 50 });
+  await userEvent.type(input, '1.5', { delay: 50 });
+  expect(input).not.toHaveStyle({ color: '#cd2703' });
+  await userEvent.clear(input);
   expect(input).not.toHaveStyle({ color: '#cd2703' });
 };

packages/react-forms/src/lib/form-field-number-renderer/form-field-number-renderer.tsx

@@ -64,9 +64,19 @@ function NumberFieldRenderer({
   );
 
   const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    fieldProps.onChange(
-      e.target.value === '' ? undefined : parseFloat(e.target.value)
-    );
+    if (e.target.value === '') {
+      if (e.target.validity.valid) {
+        // Actually empty
+        fieldProps.onChange(undefined);
+      } else {
+        // Not empty but something that cannot be parsed as a number
+        fieldProps.onChange(NaN);
+      }
+    } else {
+      fieldProps.onChange(
+        parseFloat(e.target.value));
+    }
+
     setValue(e.target.value);
   };
 

packages/react-forms/src/utils.ts

@@ -116,7 +116,10 @@ function buildValidationRulesNumber(
       validate: {
         ...(baseRules?.validate || {}),
         integer: (value: number) =>
-          Number.isInteger(value) || texts?.errors?.integer || false,
+          value === undefined ||
+          Number.isInteger(value) ||
+          texts?.errors?.integer ||
+          false,
       },
     };
   } else {
@@ -125,7 +128,10 @@ function buildValidationRulesNumber(
       validate: {
         ...(baseRules?.validate || {}),
         number: (value: number) =>
-          !isNaN(value) || texts?.errors?.number || false,
+          value === undefined ||
+          !isNaN(value) ||
+          texts?.errors?.number ||
+          false,
       },
     };
   }