[email protected] breaks edit mode

[dhess]

One of the changes in ReactFlow 11.10.4 breaks edit mode. Selecting any node in the tree causes all nodes in the edit window to disappear — their visibility property is set to false and the only way to get them back is to reload the page. Note that the selected node's type in the "Selection info" picture-in-picture window remains visible after the selection is made.

The issue sounds similar to these:

• fix(nodes): re-measure nodes when dimensions are missing  xyflow/xyflow#3897 (comment)
• Hidden nodes that reappear do not trigger a NodeDimensionChange on resize xyflow/xyflow#4064

However, no NodeDimensionChange should be triggering in our case, as far as I'm aware.

The nodes that were previously visible are still in the DOM and are still present at the same screen locations as before they disappeared, so this does not seem to be a viewport issue: it's simply that their visibility gets set to hidden.

The bug also exists in [email protected], which is the latest version at the time of writing.

[dhess]

This bug manifests differently on different browsers:

• on Safari on macOS, it almost always happens on the initial node selection, but sometimes only on the 2nd selection.
• on Chrome on macOS, it always happens on the initial node selection, as far as I can tell.
• on Firefox on macOS, it almost never happens, but once it does, the only remedy is to reload.

[dhess]

Also weird: once the bug occurs (on any browser), if you toggle the "level" button, then the syntax nodes will re-appear, but only the syntax nodes:

Subsequently selecting one of the visible syntax nodes will cause all the nodes to disappear again, until you reload or toggle the "level" button again.

[dhess]

Hmm, this bug is much harder to trigger when deployed as compared to when it's running via vite in HMR mode.

For example, see the deployment in #1175, which uses React Flow v11.10.4, the first version where the bug appears. The Primer program contained in this session causes the bug to appear on the very first click with nearly 100% reproducibility when I interact with it using Chrome on macOS and vite in HMR mode on localhost, but when using the same version of Chrome on the deployed app, the bug is very hard — but not impossible — to trigger. Frustrating!

[dhess]

In #1173, we've upgraded to React Flow v12 (beta). This issue hasn't completely gone away in that version, but it's rare enough (at least in the deployed version) that I think it's probably worth going ahead with the upgrade anyway.

I'll keep this issue open for now until we've squashed it completely. (I now believe it's likely an upstream issue and not something we're doing wrong.)