Conversation
…sValid
The DOM-based hit-test (event.target.closest('.react-flow__node'|'.react-flow__handle'))
is unreliable on mouseup during an xyflow connection drag. event.target can be the
connection-line overlay rather than the target handle, so a successful handle-to-handle
drop fired both onConnect (correct edge) and onConnectEnd's fallback "create node on
pane drop" branch (spurious node + spurious edge).
Replace the DOM check with xyflow's own tri-state signal: FinalConnectionState.isValid.
Only null (pointer never entered a handle's connection radius) represents a true pane
drop. true means onConnect already handled it; false means an invalid handle drop.
🧹 PR Environment Cleaned UpThe PR environment has been successfully deleted. Deleted Resources:
All resources have been cleaned up and will no longer incur costs. |
ℹ️ No PR Environment to Clean UpNo PR environment was found for this PR. This is expected if:
|
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
In the workflow canvas, dragging a connection from one node's handle to another node's handle successfully created the edge and spawned a spurious extra node with its own spurious edge.
Root cause:
onConnectEndused a DOM hit-test (event.target.closest('.react-flow__node' | '.react-flow__handle')) to decide whether the drop landed on empty pane. During an xyflow connection drag,event.targeton mouseup can be the connection-line SVG overlay rather than the target handle, so the pane-drop branch fired even on successful handle-to-handle drops -- creating a node in addition to the edge thatonConnectalready made.Fix: replace the DOM hit-test with xyflow's own
FinalConnectionState.isValid. OnlyisValid === null(pointer never entered a handle's connection radius) is treated as a true pane drop.true: valid connection -- onConnect handled it, skip.false: over an invalid handle -- skip (preserves prior behavior where the DOM check also skipped).null: genuine pane drop -- create fallback node + edge.File touched:
components/workflow/workflow-canvas.tsx.Test plan