Trigger a mouse event every time the ReactFlow component is clicked

[AryanK1511]

This PR fixes #713 .

Issue Recap

Initially, I tried updating the ReactFlow library to version 12, hoping that would solve the issue, but it didn’t work. After further investigation, I found this discussion detailing our exact use case. The response from the maintainer identified the underlying cause: the problem stems from the d3 zoom library that ReactFlow uses under the hood.

When disabling pointer events (as suggested), it allowed me to detect clicks, but this also disabled the drag functionality, which isn’t ideal for our use case.

My Solution

To resolve this, I implemented a workaround that triggers a mousedown event programmatically whenever a click occurs inside the ReactFlow component, ensuring that the dropdown closes as expected without disabling any essential functionality like dragging.

Here’s what I did:

1. Added a function to programmatically trigger the mousedown event:

   const dispatchMouseEvent = (event: React.MouseEvent | MouseEvent) => {
       if (event.isTrusted) {
         const mouseDownEvent = new MouseEvent('mousedown', {
           bubbles: true,
           cancelable: true,
           clientX: event.clientX,
           clientY: event.clientY,
           button: 0,
         });
         document.dispatchEvent(mouseDownEvent);
       }
   };

   This function triggers a mousedown event every time it's called. The frontend library we’re using (Ant Design) automatically closes the dropdown whenever a mousedown event is detected, so this is the key to solving the problem.

2. Triggered the function on relevant events in the ReactFlow component:

   <ReactFlow
       nodes={nodes}
       edges={edges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onEdgeMouseEnter={onEdgeMouseEnter}
       onEdgeMouseLeave={onEdgeMouseLeave}
       onInit={onInit}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       maxZoom={1}
       onPaneClick={(event) => dispatchMouseEvent(event)}
       onPointerDown={(event) => dispatchMouseEvent(event)}
       proOptions={{ hideAttribution: true }}
   >

   By calling the dispatchMouseEvent function inside onPaneClick and onPointerDown, we ensure that a mousedown event is triggered whenever someone clicks or presses inside the ReactFlow component, resulting in the dropdown closing. This way, no library update is required, and we preserve the drag functionality.

I’ve also recorded a video demonstrating the fix in action. It works perfectly now, and I believe this is the best way to resolve the issue.

Screen.Recording.2024-10-04.at.9.01.16.AM.mov

Let me know your thoughts, and feel free to merge this PR if you’re satisfied with the solution.

[AryanK1511]

@andreashimin, you were right, onPaneClick was not required and I also added a check so that the mouse event is only dispatched if the user clicks outside of the dropdown menu. You can check out this attached video to verify that everything works:

Screen.Recording.2024-10-07.at.2.41.28.PM.mov

[andreashimin]

@AryanK1511, It works great now 👍🏼 !

You can DM @chilijung on Discord with #713 to get the swag form link
Thank you for your contribution!