From 8e30a8ea13d288daeddd0f81dbdfbcdd8126aab5 Mon Sep 17 00:00:00 2001
From: Jovan Ssebaggala <jssebaggala@outlook.com>
Date: Tue, 20 Aug 2024 22:02:48 +0300
Subject: [PATCH] (fix) parse NumberInput value to a number (#367)

* parse NumberInputValue to Number

* wrap change handler in a useCallback
---
 src/components/inputs/number/number.component.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/inputs/number/number.component.tsx b/src/components/inputs/number/number.component.tsx
index 848efccbc..e690c28d0 100644
--- a/src/components/inputs/number/number.component.tsx
+++ b/src/components/inputs/number/number.component.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Layer, NumberInput } from '@carbon/react';
 import classNames from 'classnames';
 import { isTrue } from '../../../utils/boolean-utils';
@@ -22,6 +22,11 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
     }
   };
 
+  const handleChange = useCallback((event) => {
+    const parsedValue = Number(event.target.value);
+    setFieldValue(isNaN(parsedValue) ? undefined : parsedValue);
+  }, [setFieldValue]);
+
   const isInline = useMemo(() => {
     if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
       return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
@@ -49,7 +54,7 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
         min={Number(field.questionOptions.min) || undefined}
         name={field.id}
         value={field.value ?? ''}
-        onChange={setFieldValue}
+        onChange={handleChange}
         onBlur={onBlur}
         allowEmpty={true}
         size="lg"