With `connectOnClick` set, there is no way to leave the "connecting" state without creating a connection
Author: reckterCreated Apr 29, 2025Updated Aug 2, 2026
Labelsenhancementreact
What platform were you using when you found the bug?
Live code example
No response
Describe the Bug
With the drag&drop mode, you can just drop the connection wherever (with strict connection mode on).
With connectOnClick however you cannot go out of that mode by clicking.
You have to click another handle. Which will create a node of course.
I think you should be able to cancel the connection by clicking on the backdrop (but not dragging it)
Steps to reproduce the bug or issue
- Have
connectOnClickon - Click on a source node
- There is no way to "deselect" without creating a connection to another node
(I could not create a reproduction example, as the code in the connection event example doest run in codesandbox, but here is the code: https://codesandbox.io/p/devbox/throbbing-pine-xvj9lv?utm_medium=sandpack)
Expected behavior
There should be a way to get out of the connection mode. I think clicking on the backdrop should do it
Screenshots or Videos
No response
Additional context
No response
Source: xyflow/xyflow