Dropdowns stay visible in modeling diagram

[andreashimin]

Describe the bug
When users click the "more" icons in the model diagram and drag the screen, the dropdowns remain visible and don't disappear as expected.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to the Modeling page.
2. Click the "more" icon on any model to display the dropdown.
3. Drag and move the diagram.
4. The dropdown stays visible on the screen instead of disappearing as expected.

Expected behavior
The dropdowns should automatically close when users click outside of them or shift focus to another area of the screen.

Screenshots

Additional context
Add any other context about the problem here.

[AryanK1511]

Hello @andreashimin! I am willing to work on this. Are you able to assign this to me?

[chilijung]

@AryanK1511 assigned! Good luck 🤞

[AryanK1511]

Hello @chilijung !

I was working on a fix for the dropdown issue, and I wanted to share some insights and options we have for resolving it.

As shown in the screenshot below, there are two different components: when you click in the green area, the dropdown closes, but it doesn’t close when you click in the red area.

This discrepancy occurs because the ReactFlow component (version 11) does not detect mouse clicks in the same way; instead, it interprets these actions as attempts to drag the screen.

This issue has been discussed in this GitHub issue, where others have faced the same problem. The maintainers of React Flow released version 12 to address this, as mentioned in this follow-up issue. Many users reported that the update resolved their issues, as highlighted here.

Proposed Solutions

1. Upgrade React Flow:
   We can update our dependency from "reactflow": "11.10.3" to a version within the 12 range. This version introduces the paneClickDistance property, allowing us to configure the maximum distance between mouse down and up events that will trigger a click. For more details, refer to this comment by the maintainer.

2. Add onPaneClick Handler:
   Alternatively, we could implement the onPaneClick property in the ReactFlow component. This way, every time a click is detected on the pane, we can update the dropdown's state to instruct it to close. Here’s how that would look:

   <ReactFlow
     nodes={nodes}
     edges={edges}
     onPaneClick={() => console.log('Hello')}
     onNodesChange={onNodesChange}
     onEdgesChange={onEdgesChange}
     onEdgeMouseEnter={onEdgeMouseEnter}
     onEdgeMouseLeave={onEdgeMouseLeave}
     onInit={onInit}
     nodeTypes={nodeTypes}
     edgeTypes={edgeTypes}
     maxZoom={1}
     proOptions={{ hideAttribution: true }}
   >

Instead of the console.log() we would have a function that updates the state for the dropdown component. This would affect the separation of concerns negatively tho.

3. Switch to Hover Dropdown:
   Another option would be to change the dropdown to a hover-based interaction, where it remains open as long as the mouse is over the dropdown area.

Let me know how you’d like to proceed. I’ve explored various options, but I believe one of these solutions should effectively address the issue.

Thank you!

[chilijung]

@AryanK1511, Thank you for the quick progress! Fantastic! @andreashimin will reply to you soon.

[andreashimin]

Hi @AryanK1511

Thanks for the quick solutions!
I believe option 1 is ideal if it resolves the issue simultaneously. However, if there are any unforeseen problems during the migration, option 2 would be an acceptable alternative.

I have reviewed the React Flow migration guide for v12 https://reactflow.dev/learn/troubleshooting/migrate-to-v12, and we’ll need to update some APIs and types. It looks manageable, so we can go ahead and give it a try.

[AryanK1511]

Hello @chilijung and @andreashimin ! I am back again. I managed to fix this issue in #724. Check it out and lemme know what you think about it.