fix(nodes): draggable when toggle hidden prop closes #2205

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 />
 

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,