From 53165335cff351525869c490bdd3adab80f14193 Mon Sep 17 00:00:00 2001
From: Samuel Male <samuelsmalek@gmail.com>
Date: Thu, 3 Oct 2024 22:11:25 +0300
Subject: [PATCH] (fix) Resolve a bug where a NaN value causes an infinite
 re-render cycle 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 |  9 ++++++++-
 src/components/inputs/number/number.test.tsx      | 13 +++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

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