Skip to content

fix: cancel click connections on pane click - #6068

Merged
moklick merged 6 commits into
xyflow:mainfrom
snowyukitty:fix/cancel-click-connection-on-pane
Oct 28, 2026
Merged

moklick merged 6 commits into
xyflow:mainfrom
snowyukitty:fix/cancel-click-connection-on-pane

Conversation

@snowyukitty

@snowyukitty snowyukitty commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

Fixes #5237.

Clicking the empty pane cancels a pending click-to-connect operation in both React Flow and Svelte Flow. The click-connect-end callback receives the final connection state before the start handle is cleared; normal pane clicks, panning, selection drags, node clicks and handle-to-handle connections keep their existing behavior.

The React and Svelte fixtures now run through one framework-agnostic click-connect.spec.ts, using the configured framework's pane, viewport, selection, node, connection and edge selectors. The duplicate Svelte spec is removed. The patch changeset covers both packages.

Validation on Linux, at this revision:

  • pnpm build and pnpm typecheck pass.
  • Prettier passes for the shared spec.
  • All seven cases pass for each framework on Chromium, Firefox and WebKit: 42 focused browser tests, with retries disabled.

From the repository root:

pnpm build
pnpm typecheck
pnpm exec prettier --check tests/playwright/e2e/click-connect.spec.ts
cd tests/playwright
FRAMEWORK=react pnpm exec playwright test e2e/click-connect.spec.ts -c playwright.react.config.ts --workers=2 --retries=0
FRAMEWORK=svelte pnpm exec playwright test e2e/click-connect.spec.ts -c playwright.svelte.config.ts --workers=2 --retries=0

This revision reruns the focused browser suite. The earlier full-suite results are historical: at 7abb6f0, React had 197 passing/25 skipped and Svelte had 187 passing/28 skipped/7 failures (six background-route 404s reproduced without the Svelte fix; the WebKit auto-pan case passed in an isolated rerun).

@changeset-bot

changeset-bot Bot commented Oct 18, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1d443ba

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@xyflow/react Patch
@xyflow/svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@moklick

moklick commented Oct 26, 2026

Copy link
Copy Markdown
Member

thanks for your PR @snowyukitty . Could you add the same fix for Svelte Flow too?

@moklick moklick self-assigned this Oct 26, 2026
@snowyukitty snowyukitty changed the title fix(react): cancel click connections on pane click fix: cancel click connections on pane click Oct 26, 2026
@snowyukitty

Copy link
Copy Markdown
Contributor Author

Added the Svelte Flow equivalent in 7abb6f0, including onclickconnectend, regression tests and a patch changeset for @xyflow/svelte. Thanks for pointing this out!

@moklick

moklick commented Oct 27, 2026

Copy link
Copy Markdown
Member

Thanks! Could you merge the two specs into one framework-agnostic spec?

@snowyukitty

Copy link
Copy Markdown
Contributor Author

Combined the React and Svelte cases into one framework-agnostic click-connect.spec.ts in 3e78f71 and removed the duplicate Svelte spec. The shared spec passes all seven cases for each framework on Chromium, Firefox and WebKit (42 tests, retries disabled); build, typecheck and Prettier also pass. Thanks for the suggestion!

@moklick
moklick merged commit 57c7317 into xyflow:main Oct 28, 2026
1 check passed
@moklick

moklick commented Oct 28, 2026

Copy link
Copy Markdown
Member

Thanks!

@moklick moklick mentioned this pull request Oct 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

With connectOnClick set, there is no way to leave the "connecting" state without creating a connection

2 participants