Use local state for input loop value (#1484)
This commit is contained in:
@@ -18,6 +18,7 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle";
|
|||||||
import { NodeActionMenu } from "../NodeActionMenu";
|
import { NodeActionMenu } from "../NodeActionMenu";
|
||||||
import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
|
import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
|
||||||
import type { LoopNode } from "./types";
|
import type { LoopNode } from "./types";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
function LoopNode({ id, data }: NodeProps<LoopNode>) {
|
function LoopNode({ id, data }: NodeProps<LoopNode>) {
|
||||||
const { updateNodeData } = useReactFlow();
|
const { updateNodeData } = useReactFlow();
|
||||||
@@ -26,6 +27,9 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
|
|||||||
id,
|
id,
|
||||||
initialValue: data.label,
|
initialValue: data.label,
|
||||||
});
|
});
|
||||||
|
const [inputs, setInputs] = useState({
|
||||||
|
loopValue: data.loopValue,
|
||||||
|
});
|
||||||
const deleteNodeCallback = useDeleteNodeCallback();
|
const deleteNodeCallback = useDeleteNodeCallback();
|
||||||
|
|
||||||
const children = nodes.filter((node) => node.parentId === id);
|
const children = nodes.filter((node) => node.parentId === id);
|
||||||
@@ -101,8 +105,12 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
|
|||||||
</div>
|
</div>
|
||||||
<WorkflowBlockInput
|
<WorkflowBlockInput
|
||||||
nodeId={id}
|
nodeId={id}
|
||||||
value={data.loopValue}
|
value={inputs.loopValue}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
|
setInputs({
|
||||||
|
...inputs,
|
||||||
|
loopValue: value,
|
||||||
|
});
|
||||||
updateNodeData(id, { loopValue: value });
|
updateNodeData(id, { loopValue: value });
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user