From 6d465578fe6def29e7ade30c5ceec718e5c9aeff Mon Sep 17 00:00:00 2001 From: Jayanth Kumar Date: Sat, 29 Apr 2023 16:11:07 +0530 Subject: [PATCH 1/2] quilt,quilt/react-form: Add support for numeric string fields in form state 1. Update the form state comparison by converting numeric string fields to numbers, enabling correct dirty state evaluation 2. Add isNumericString utility function to identify numeric strings and exclude empty strings Fixes: #2629 --- packages/react-form/src/hooks/field/field.ts | 6 ++++-- packages/react-form/src/utilities.ts | 4 ++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react-form/src/hooks/field/field.ts b/packages/react-form/src/hooks/field/field.ts index 50353e6ff1..eda84d1d5e 100755 --- a/packages/react-form/src/hooks/field/field.ts +++ b/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( 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( diff --git a/packages/react-form/src/utilities.ts b/packages/react-form/src/utilities.ts index c6cf2a0aa8..e9a8eef303 100755 --- a/packages/react-form/src/utilities.ts +++ b/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)); +} From a5a8b00ad03e31ec39b834a635312977b37a29b4 Mon Sep 17 00:00:00 2001 From: Jayanth Kumar Date: Sun, 30 Apr 2023 01:16:07 +0530 Subject: [PATCH 2/2] quilt,quilt/react-form: Add isNumericString() tests 1. Add tests to ensure isNumericString() returns true for valid numeric strings 2. Add tests to ensure isNumericString() returns false for non-numeric strings 3. Add tests to ensure isNumericString() returns false for non-string values Fixes: #2629 --- .../react-form/src/tests/utilities.test.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/packages/react-form/src/tests/utilities.test.ts b/packages/react-form/src/tests/utilities.test.ts index c23fc61024..2b7c3a98e2 100644 --- a/packages/react-form/src/tests/utilities.test.ts +++ b/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); + }); +});