From 0724936be4f61b77077e41ca1268a3e60dac1147 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 7 Jun 2022 23:11:32 +0200
Subject: [PATCH] fix(nodes): draggable when toggle hidden prop closes #2205

---
 example/src/Hidden/index.tsx      | 25 ++++++++++++++++++-------
 src/components/Nodes/wrapNode.tsx |  2 +-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/example/src/Hidden/index.tsx b/example/src/Hidden/index.tsx
index 384bbe4c..3dbc51ff 100644
--- a/example/src/Hidden/index.tsx
+++ b/example/src/Hidden/index.tsx
@@ -32,22 +32,33 @@ const setHidden = (hidden: boolean) => (els: any[]) =>
   });
 
 const HiddenFlow = () => {
-  const [nodes, setNodes] = useNodesState(initialNodes);
-  const [edges, setEdges] = useEdgesState(initialEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
-  const onConnect = useCallback((connection: Connection) => {
-    setEdges((eds) => addEdge(connection, eds));
-  }, []);
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) => addEdge(connection, eds));
+    },
+    [setEdges]
+  );
 
   useEffect(() => {
     setNodes(setHidden(isHidden));
     setEdges(setHidden(isHidden));
-  }, [isHidden]);
+  }, [isHidden, setEdges, setNodes]);
+
+  console.log(nodes);
 
   return (
-    <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect}>
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onConnect={onConnect}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+    >
       <MiniMap />
       <Controls />
 
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 55e4d769..52c34f36 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -104,7 +104,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
       onDrag: onDrag,
       onStop: onDragStop,
       nodeRef,
-      disabled: !isDraggable,
+      disabled: hidden || !isDraggable,
       noDragClassName,
       handleSelector: dragHandle,
       nodeId: id,