🐛 [BUG]: is-valid-connection elements target and source Node switched; breaking change upgrading to version >= 1.41.7

[SelfMade2001]

Is there an existing issue for this?

• [x] I have searched the existing issues and this is a new bug.

Current Behavior

<VueFlow
            :connection-mode="ConnectionMode.Strict"
            :is-valid-connection="validateConnection"
        >

In the following setup node1 only has a source handle and node2 only has a target handle.

Connecting node1 -> node2

const validateConnection = (connection, elements) => {
    console.log(elements.sourceNode.id) // node1
    console.log(elements.targetNode.id) // node2
}

Connecting node1 <- node2 (making the same connection but starting to drag from node2's target handle)

const validateConnection = (connection, elements) => {
    console.log(elements.sourceNode.id) // node2
    console.log(elements.targetNode.id) // node1
}

Expected Behavior

Connecting node1 -> node2

const validateConnection = (connection, elements) => {
    console.log(elements.sourceNode.id) // node1
    console.log(elements.targetNode.id) // node2
}

Connecting node1 <- node2 (making the same connection but starting to drag from node2's target handle)

const validateConnection = (connection, elements) => {
    console.log(elements.sourceNode.id) // node1
    console.log(elements.targetNode.id) // node2
}

When validating a connection it should not matter from which side the user starts to drag.

Steps To Reproduce

I am using ConnectionMode.Strict. The bug is in every version >= 1.41.7

Minimal reproduction of the issue with CodeSandbox

No response

Relevant log output

Anything else?

I upgraded vue-flow from below 1.41.7 to the latest version. I tested all versions until I found that it still works in 1.41.6 but breaks in 1.41.7. The changelog did not mention this change, probably because it is a bug.

[bcakmakoglu]

Thanks for the report. I'll investigate this issue and see what's going on :)

[bcakmakoglu]

Sorry for the late response. I tried this on 1.45.0 and did not experience the issue described.

I have two nodes A and B, both having two handles for each type (source, target).

I use the source handle of node A and connect it to the target handle in node B and receive sourceNode: { id: 'A', ... } and targetNode: { id: 'B', ... }.

Now I try to connect the target handle of node B to the source handle of node A (reverse direction) and receive sourceNode: { id: 'A', ... } and targetNode: { id: 'B', ... } which seems correct to me.

[bcakmakoglu]

@SelfMade2001 Ping, can you recheck if you're experiencing this issue on the latest version and if you do, could you provide me a minimal repro of the issue?

[SelfMade2001]

Thanks for the reply. I rechecked with the newest version and the problem still persists the way I described it. I am working on creating a minimal repro for the issue.

[SelfMade2001]

I did my best to create a minimal repro for this issue. It is my first time doing this, hope I did it right xD

https://github.com/SelfMade2001/vueflow-issue-1855

What I did is creating a new vue project using "npm create vue@latest" and then adding a minimal vueflow example. Just fork this project and run "npm install" and then "npm run dev". This should give you the link to see the project. I had to update my Node.js version, I am now using v22.18.0.

Try connecting the two nodes in both directions like this:

From left to right (node 1 to node 2) I get the following console.log():

"s 1 t 2" very often

From right to left (node 2 to node 1) I get the following console.log():

"s 2 t 1" very often (which should not happen) followed by "s 1 t 2" once

The following image shows the console output for connecting from left to right, then deleting the edge and then connecting from right to left. The issue is, that "s 2 t 1" is not supposed to happen ever. I assume it happens while dragging and then it works right once when the mouse button is lifted up.

[bcakmakoglu]

Alright, I got it now and found the issue 👍

There was a bit of a mixup when getting the respective source/target nodes in isValidConnection, which will be fixed with the next release.

The "once" logs are explained by this: If you pass a global isValidConnection handler (i.e. a prop for <VueFlow>) it is also used when creating edges (which is helpful when programatically creating edges and still wanting them to go through validations first).

[SelfMade2001]

Thank you very much! :D

[bcakmakoglu]

Will close the issue again once the fix is released :)

[bcakmakoglu]

Fixed with 1.46.0