(fix) Resolve a bug where a NaN value causes an infinite re-render cy…

…cle in the Number input (#406)

* Fix a bug where a NaN value causes an infinite rerender cycle

* Add test coverage

src/components/inputs/number/number.component.tsx

@@ -15,6 +15,13 @@ const NumberField: React.FC<FormFieldInputProps> = ({ 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<FormFieldInputProps> = ({ 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}

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();