From 9e480026b33ed7ae7ee68eb915b9231b359c9998 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 25 Mar 2025 19:14:07 -0300
Subject: [PATCH] fix: allow float to be typed in float input (#7275)

Added local state for (.) to be allowed when inserting Float input
---
 .../components/floatComponent/index.tsx       | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/floatComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/floatComponent/index.tsx
index a37eb9cf9..dd17871e3 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/floatComponent/index.tsx
@@ -23,6 +23,9 @@ export default function FloatComponent({
   const min = rangeSpec?.min ?? -2;
   const max = rangeSpec?.max ?? 2;
 
+  // Local state for input value
+  const [localValue, setLocalValue] = useState<string>(value.toString());
+
   // Clear component state
   useEffect(() => {
     if (disabled && value !== 0) {
@@ -30,20 +33,29 @@ export default function FloatComponent({
     }
   }, [disabled, handleOnNewValue]);
 
+  // Update local value when prop changes
+  useEffect(() => {
+    setLocalValue(value.toString());
+  }, [value]);
+
   const [cursor, setCursor] = useState<number | null>(null);
   const ref = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     ref.current?.setSelectionRange(cursor, cursor);
-  }, [ref, cursor, value]);
+  }, [ref, cursor, localValue]);
 
   const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     setCursor(e.target.selectionStart);
-    handleOnNewValue({ value: Number(e.target.value) });
+    setLocalValue(e.target.value);
+  };
+
+  const handleBlur = () => {
+    handleOnNewValue({ value: Number(localValue) });
   };
 
   const handleNumberChange = (newValue) => {
-    handleOnNewValue({ value: Number(newValue) });
+    setLocalValue(newValue);
   };
 
   const handleInputChange = (event) => {
@@ -79,17 +91,19 @@ export default function FloatComponent({
         min={min}
         max={max}
         onChange={handleNumberChange}
-        value={value ?? ""}
+        value={localValue ?? ""}
+        onBlur={handleBlur}
       >
         <NumberInputField
           className={getInputClassName()}
           onChange={handleChangeInput}
-          onKeyDown={(event) => handleKeyDown(event, value, "")}
+          onKeyDown={(event) => handleKeyDown(event, localValue, "")}
           onInput={handleInputChange}
           disabled={disabled}
           placeholder={editNode ? "Float number" : "Type a float number"}
           data-testid={id}
           ref={inputRef}
+          onBlur={handleBlur}
         />
         <NumberInputStepper className={stepperClassName}>
           <NumberIncrementStepper className={incrementStepperClassName}>