diff --git a/src/components/inputs/number/number.component.tsx b/src/components/inputs/number/number.component.tsx index fc5380e2..40d052f3 100644 --- a/src/components/inputs/number/number.component.tsx +++ b/src/components/inputs/number/number.component.tsx @@ -15,6 +15,13 @@ const NumberField: React.FC = ({ field, value, errors, warn const [lastBlurredValue, setLastBlurredValue] = useState(value); const { layoutType, sessionMode, workspaceLayout } = useFormProviderContext(); + const numberValue = useMemo(() => { + if (isNaN(value)) { + return ''; + } + return value ?? ''; + }, [value]); + const onBlur = (event) => { event.preventDefault(); if (lastBlurredValue != value) { @@ -57,7 +64,7 @@ const NumberField: React.FC = ({ field, value, errors, warn max={Number(field.questionOptions.max) || undefined} min={Number(field.questionOptions.min) || undefined} name={field.id} - value={value ?? ''} + value={numberValue} onChange={handleChange} onBlur={onBlur} allowEmpty={true} diff --git a/src/components/inputs/number/number.test.tsx b/src/components/inputs/number/number.test.tsx index 2bc99c07..f1f04dac 100644 --- a/src/components/inputs/number/number.test.tsx +++ b/src/components/inputs/number/number.test.tsx @@ -50,6 +50,19 @@ describe('NumberField Component', () => { expect(screen.getByLabelText('Weight(kg):')).toBeInTheDocument(); }); + it('should render with NaN value', async () => { + await renderNumberField({ + field: numberFieldMock, + value: NaN, + errors: [], + warnings: [], + setFieldValue: jest.fn(), + }); + + const inputElement = screen.getByLabelText('Weight(kg):') as HTMLInputElement; + expect(inputElement.value).toBe(''); + }); + it('calls setFieldValue on input change', async () => { const mockSetFieldValue = jest.fn();