Node Position Changes Cause All Nodes To Disappear

[drew-y]

Describe the Bug

On the latest version of reactflow (11.11.3), when a node is dragged by a user and the position is updated, the entire reactflow canvas clears. All nodes disappear. The issue does not occur in version 11.10.1.

I've narrowed the issue down specifically to position changes. Selection and remove does not cause the issue.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

This issue is occurring on an internal codebase. I'd be happy to hop on a zoom call M-F (10am-5pm PST) to provide specifics on our implementation and a walkthrough of the issue.

Here's our rough setup. We are using reactflow in a controlled flow. We have an internal representation of nodes that are stored in a react state. When we receive an onNodeChanges call, we update the internal representation of our nodes. When these internal nodes are updated, a memorized mapper function translates our internal representation back to the reactflow Node type.

In the case of position data, use the same exact format as reactflow.

The mapper function is really simple:

export const automationNodeToFlowNode = (props: {
  node: AutomationNode; // Our internal representation
  onChange: NodeChangeHandler;
}): FlowNode => { // FlowNode === Alias for reacflow Node type
  const { node, onChange } = props;
  const { position, zIndex: pZIndex, selected } = node.properties;
  const { id, type, zIndex: deprecatedZIndex } = node;
  const zIndex = type === "trigger" ? 1002 : pZIndex ?? deprecatedZIndex;
  return {
    id,
    position,
    type,
    zIndex,
    selected,
    data: {
      onChange: (node) => onChange({ id, ...node }),
      node,
    },
  };
};

Expected behavior

Node should not stop rendering due to change in position

Screenshots or Videos

https://www.loom.com/share/424712fe24084f0da6f15a056850ac54?sid=850bda44-4edb-4a02-844a-51a3672c160d

Platform

OS: macOS 14.4.1
Browser: Arc 1.43 (Chromium 125)
Reactflow version: 11.11.3
React version: 17.0.2

Additional context

No response

[moklick]

This is probably because of a custom onNodesChange implementation. Are you using the built-in applyNodeChanges function? If not it's important to apply all changes correctly. Most importantly the initial dimension changes which set the width and height attributes of a node.

[drew-y]

That was it! Thanks!

We weren't tracking the dimension changes. For whatever reason, reactflow didn't seem to care until after the latest update.

[moklick]

I am glad this solved your issue. It was a bug in the previous versions that led to wrong dimensions in some cases when users tried to reset nodes.