React Flow + react-resizable-panels double-click on node stops working after closing conditional form

Ankit — Tue, 23 Sep 2025 13:31:04 +0000

I am using React Flow along with react-resizable-panels and have divided the panel group into two parts:

Left panel: contains the React Flow graph.
Right panel: contains a form.

The behavior is as follows:

On single click of a node → the form opens in the right panel.
On double click of a node → the user is redirected to another flow.

Issue:
When I close the form conditionally (after it was opened on a single click), the double click event on the node stops working.

Double click works fine if I don’t open/close the form.
Single click and double click both work individually.
Only after closing the conditional form, double click doesn’t fire.

I debugged the event handlers and logic but couldn’t find the cause.

Here is the sample code that I am trying to implement

import React, { useState } from "react";
import ReactFlow, { Background, Controls } from "reactflow";
import "reactflow/dist/style.css";
import {
  Panel,
  PanelGroup,
  PanelResizeHandle,
} from "react-resizable-panels";

const initialNodes = [
  {
    id: "1",
    position: { x: 100, y: 100 },
    data: { label: "Node 1" },
    type: "default",
  },
];

export default function App() {
  const [formOpen, setFormOpen] = useState(false);
  const [selectedNode, setSelectedNode] = useState(null);

  const handleNodeClick = (_, node) => {
    setSelectedNode(node);
    setFormOpen(true); // open form on single click
  };

  const handleNodeDoubleClick = (_, node) => {
    alert("Double click works! Navigating to flow: " + node.id);
    // navigation logic here...
  };

  return (
    <PanelGroup direction="horizontal">
      <Panel defaultSize={70}>
        <ReactFlow
          nodes={initialNodes}
          onNodeClick={handleNodeClick}
          onNodeDoubleClick={handleNodeDoubleClick}
          fitView
        >
          <Background />
          <Controls />
        </ReactFlow>
      </Panel>

      <PanelResizeHandle />

      <Panel defaultSize={30}>
        {formOpen && (
          <div
            style={{
              border: "1px solid #ccc",
              padding: "10px",
              margin: "10px",
            }}
          >
            <h3>Form for {selectedNode?.data?.label}</h3>
            <button onClick={() => setFormOpen(false)}>Close Form</button>
          </div>
        )}
      </Panel>
    </PanelGroup>
  );
}

Question:
Has anyone faced a similar issue with React Flow + react-resizable-panels?
How can I ensure that the double click event continues to work after conditionally opening/closing the form panel?

Forem: Ankit

React Flow + react-resizable-panels double-click on node stops working after closing conditional form