From 0a8f1a824eae3db6bdbf6f642b72c67dd40f2a20 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Sat, 4 Jan 2025 03:09:25 -0800
Subject: [PATCH] Use local state for input loop value (#1484)

---
 .../workflows/editor/nodes/LoopNode/LoopNode.tsx       | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
index d9c4c531..77e95489 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
@@ -18,6 +18,7 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import type { LoopNode } from "./types";
+import { useState } from "react";
 
 function LoopNode({ id, data }: NodeProps<LoopNode>) {
   const { updateNodeData } = useReactFlow();
@@ -26,6 +27,9 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
     id,
     initialValue: data.label,
   });
+  const [inputs, setInputs] = useState({
+    loopValue: data.loopValue,
+  });
   const deleteNodeCallback = useDeleteNodeCallback();
 
   const children = nodes.filter((node) => node.parentId === id);
@@ -101,8 +105,12 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
               </div>
               <WorkflowBlockInput
                 nodeId={id}
-                value={data.loopValue}
+                value={inputs.loopValue}
                 onChange={(value) => {
+                  setInputs({
+                    ...inputs,
+                    loopValue: value,
+                  });
                   updateNodeData(id, { loopValue: value });
                 }}
               />