Merge pull request #1774 from Avaiga/bug/#1772-change_delay-does-not-…

…work-for-input Fix change_delay in input
Avaiga · Sep 11, 2024 · 2e5c422 · 2e5c422
2 parents aae5778 + 72b9dc7
commit 2e5c422
Showing 1 changed file with 23 additions and 5 deletions.
diff --git 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}