xyflow: `setNodes` + `fitView` in an uncontrolled flow is broken

Describe the Bug

I think @xyflow/react: v12.0.0-next.9 introduced a regression.

I’m using a setup very similar to Elkjs Tree example from the docs: https://reactflow.dev/examples/layout/elkjs

Also, I’ve implemented Expand and Collapse similar to this example: https://reactflow.dev/examples/layout/expand-collapse

My flow looks something like this: elkjs => setNodes/setEdges => fitView for auto layout.

After upgrading to v12.0.0-next.9 I started to notice weird glitches with fitView function. Sometimes it only fits some of the nodes (ones that were updated). Sometimes it fits into random portion of the view. And sometimes it does nothing at all.

After some debugging, the only difference between v12.0.0-next.8 and v12.0.0-next.9 I’ve found is that initial nodes have computed.height and computed.width defined. But after calling setNodes method, new nodes have computed.height: undefined and computed.width: undefined image

Steps to Reproduce the Bug or Issue

  1. Update to 12.0.0-next.9
  2. Use this example as a base
  3. Call setNodes method a couple of times
  4. New nodes will have undefined computed.height and computed.width
  5. fitView method will be broken

Expected behavior

After calling fitView all nodes should be visible

Screenshots or Videos

Check this video: https://drive.google.com/file/d/1sCzIzVp6LicJ8_5ref2fA24tBPkLV7vR/view?usp=sharing

Platform

  • OS: Windows 11
  • Browser: Chrome
  • Version: 122.0.6261.70

About this issue

  • Original URL
  • State: open
  • Created 4 months ago
  • Comments: 16 (8 by maintainers)

Most upvoted comments

Got it. It might be related with the new batching of setNodes. We will check it next week.