Edges connect to wrong handles in ConnectionMode.Loose

Describe the Bug

The problem occurs when ConnectionMode.Loose is used and nodes have target as well as source nodes. Once two sources get connected, the edge is displayed as connected to the target handle of the target node, despite specifying the source handle correctly in the edge data.

Just having a quick glance at the source code, I believe the following lines to cause the problem: https://github.com/wbkd/react-flow/blob/6526e3297e67c57c2e9be0654be3792c6cc04483/packages/core/src/container/EdgeRenderer/index.tsx#L116-L121 target handles exist, so the source handles array gets disregarded. getHandle then chooses the first target, because it’s the only one available (at least in my case it is). Maybe a .concat instead of || would fix this.

Your Example Website or App

https://github.com/michaelspiss/berry-sethi-tutor

Steps to Reproduce the Bug or Issue

• Have a react flow with connectionMode={ConnectionMode.Loose}.
• Have two default nodes in the graph
• Connect source to source -> will display as source to target, despite being source to source in the data

Expected behavior

Edge should connect to handle specified in its data

Screenshots or Videos

s: source handle, t: target handle (visibility: hidden here). Windows screen recorder messed up the pointer position a bit, just assume it’s on point.

https://user-images.githubusercontent.com/17252710/205444554-557faa6d-9b2d-4dee-9fb0-c6021cf67a74.mp4

Platform

• OS: all
• Browser: all
• Version: 11.3.2

Additional context

No response

[bcakmakoglu]

Ok 😃 It was just an idea 😅

[moklick]

Thanks @michaelspiss I’ll check this.