DEV Community

Ankit
Ankit

Posted on

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

#react #help #webdev

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> ); }
Enter fullscreen mode Exit fullscreen mode

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?

Top comments (0)