Nodes are not draggable when integrated with `dagre` in v10

Describe the Bug

Discussed in this thread and creating an issue to track it.

I created an example with v9 that’s integrated with dagre for custom layout. It works pretty well (see the example here). However, after upgrading to v10, I created a similar example here but found that the dragging feature is not working. The only difference btw these two examples is that I split elements into nodes and edges due to the new API changes. The rest code should be pretty much the same. It might be something related to the new API onNodesChange and onEdgesChange, but I can’t figure out the exact reason. Do you have ideas on this?

I understand that we can work around the issue if we call the layout calculation once as suggested here. However, in our app we will add nodes dynamically. Based on @moklick’s suggestion https://github.com/wbkd/react-flow/issues/1113#issuecomment-829461998, it seems that we should re-calculate the layout whenever a new node is added. That’s why I implemented this way in v9 and it works like a charm. I’m wondering if someone can shed a light on how to make it work in v10 as well.

Your Example Website or App

https://stackblitz.com/edit/react-ts-qfwtky?file=App.tsx

Steps to Reproduce the Bug or Issue

1. Go to this Stackblitz example.
2. Try to drag any node in the graph.
3. You’ll find out that nodes are not draggable.

Expected behavior

As a user, I expected all nodes in the graph are draggable by default.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 98.0.4758

Additional context

No response

[OrhanTozan]

If you want the same behaviour as v9, replace nodes={} and edges={} with defaultNodes and defaultEdges.

[sushantdhiman]

I am facing exactly same issue (I am using elkjs for layouting), I opted for defaultNodes/ defaultEdges which seems to be working.