Numeric string fields

packages/react-form/src/hooks/field/field.ts

@@ -3,7 +3,7 @@ import {useCallback, useEffect, useMemo} from 'react';
 import isEqual from 'fast-deep-equal';
 
 import type {Validates, Field, DirtyStateComparator} from '../../types';
-import {normalizeValidation, isChangeEvent} from '../../utilities';
+import {normalizeValidation, isChangeEvent, isNumericString} from '../../utilities';
 
 import {
   updateAction,
@@ -138,7 +138,9 @@ export function useField<Value = string>(
       return undefined;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state.value, ...dependencies],
+    [state.value, ...dependencies].map(value =>
+      isNumericString(value) ? Number(value) : value),
+
   );
 
   const onChange = useCallback(

packages/react-form/src/tests/utilities.test.ts

@@ -7,6 +7,7 @@ import {
   validateAll,
   fieldsToArray,
   reduceFields,
+  isNumericString
 } from '../utilities';
 import type {Field} from '../types';
 
@@ -236,3 +237,26 @@ describe('reduceFields()', () => {
     expect(fieldsArray).toContain(work);
   });
 });
+
+describe('isNumericString()', () => {
+  it('returns true for numeric strings', () => {
+    expect(isNumericString('123')).toBe(true);
+    expect(isNumericString('3.14')).toBe(true);
+    expect(isNumericString('0.0001')).toBe(true);
+    expect(isNumericString('-50')).toBe(true);
+  });
+
+  it('returns false for non-numeric strings', () => {
+    expect(isNumericString('abc')).toBe(false);
+    expect(isNumericString('12a')).toBe(false);
+    expect(isNumericString('')).toBe(false);
+  });
+
+  it('returns false for non-string values', () => {
+    expect(isNumericString(123)).toBe(false);
+    expect(isNumericString(3.14)).toBe(false);
+    expect(isNumericString(true)).toBe(false);
+    expect(isNumericString(undefined)).toBe(false);
+    expect(isNumericString(null)).toBe(false);
+  });
+});

packages/react-form/src/utilities.ts

@@ -248,3 +248,7 @@ export function makeCleanDynamicLists(dynamicLists?: DynamicListBag) {
     });
   }
 }
+
+export function isNumericString(value: any): value is string {
+  return typeof value === 'string' && value !== '' && !isNaN(Number(value));
+}