From 72b9dc7f75b952d94fcfc50f73ad489a2439eae9 Mon Sep 17 00:00:00 2001
From: namnguyen <namnguyen20999@gmail.com>
Date: Wed, 11 Sep 2024 03:25:47 +0700
Subject: [PATCH] Fix change_delay in input

---
 .../taipy-gui/src/components/Taipy/Input.tsx  | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/taipy-gui/src/components/Taipy/Input.tsx b/frontend/taipy-gui/src/components/Taipy/Input.tsx
index 1315cc1692..2dc9de6219 100644
--- a/frontend/taipy-gui/src/components/Taipy/Input.tsx
+++ b/frontend/taipy-gui/src/components/Taipy/Input.tsx
@@ -118,9 +118,23 @@ const Input = (props: TaipyInputProps) => {
         (e: React.ChangeEvent<HTMLInputElement>) => {
             const val = e.target.value;
             setValue(val);
-            dispatch(createSendUpdateAction(updateVarName, val, module, onChange, propagate));
+            if (changeDelay === -1) {
+                return;
+            }
+            if (changeDelay === 0) {
+                Promise.resolve().then(() => {
+                    dispatch(createSendUpdateAction(updateVarName, val, module, onChange, propagate));
+                });
+            }
+            if (delayCall.current > 0) {
+                clearTimeout(delayCall.current);
+            }
+            delayCall.current = window.setTimeout(() => {
+                delayCall.current = -1;
+                dispatch(createSendUpdateAction(updateVarName, val, module, onChange, propagate));
+            }, changeDelay);
         },
-        [updateVarName, dispatch, propagate, onChange, module]
+        [changeDelay, dispatch, updateVarName, module, onChange, propagate]
     );
 
     const handleAction = useCallback(
@@ -148,7 +162,9 @@ const Input = (props: TaipyInputProps) => {
                     evt.preventDefault();
                 }
             } else if (!evt.shiftKey && !evt.ctrlKey && !evt.altKey && actionKeys.includes(evt.key)) {
-                const val = multiline ? evt.currentTarget.querySelector("textarea")?.value : evt.currentTarget.querySelector("input")?.value;
+                const val = multiline
+                    ? evt.currentTarget.querySelector("textarea")?.value
+                    : evt.currentTarget.querySelector("input")?.value;
                 if (changeDelay > 0 && delayCall.current > 0) {
                     clearTimeout(delayCall.current);
                     delayCall.current = -1;
@@ -321,8 +337,10 @@ const Input = (props: TaipyInputProps) => {
                 className={className}
                 type={showPassword && type == "password" ? "text" : type}
                 id={id}
-                inputProps={inputProps}
-                InputProps={muiInputProps}
+                slotProps={{
+                    htmlInput: inputProps,
+                    input: muiInputProps,
+                }}
                 label={props.label}
                 onChange={handleInput}
                 disabled={!active}