Skip to content

Fix touch panning when drag selection is enabled - #5918

Merged
peterkogo merged 2 commits into
xyflow:mainfrom
AlaricBaraou:fix/touch-pan-selection-conflict
Aug 3, 2026
Merged

peterkogo merged 2 commits into
xyflow:mainfrom
AlaricBaraou:fix/touch-pan-selection-conflict

Conversation

@AlaricBaraou

Copy link
Copy Markdown
Contributor

Summary

  • let the existing touch-pan gesture win over pane selection capture when drag panning is enabled
  • preserve explicit selection-key behavior and primary-mouse marquee selection
  • keep React and Svelte behavior in sync
  • clarify that panOnDrag button arrays restrict mouse input, not touch input

Why

When selectionOnDrag is enabled and panOnDrag is a mouse-button array such as [1, 2], a primary touch currently starts both viewport panning and a marquee selection. The system filter intentionally treats button arrays as mouse-only for touch panning (see #4229), so the Pane should not capture the same touch as a selection unless the selection key is explicitly active.

This uses the gesture's actual pointerType, so hybrid touchscreen computers keep normal mouse and pen behavior.

Behavior

  • touch + enabled panOnDrag + no selection key: pan without marquee
  • touch + selection key: marquee selection
  • primary mouse button excluded from panOnDrag: marquee selection
  • panOnDrag={false} and pen behavior remain unchanged

Tests

  • added a desktop-profile, touch-enabled Playwright regression for the conflict
  • verified the regression fails on the pre-fix code with one unexpected selection marquee
  • added coverage for selection-key touch behavior and primary-mouse behavior
  • React pane suite: 29 passed, 4 skipped
  • Svelte pane suite: 29 passed, 4 skipped
  • React and Svelte package typechecks, builds, and changed-file lint/format checks pass

Related to #2709.

@changeset-bot

changeset-bot Bot commented Jul 21, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e0f2956

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

@peterkogo

Copy link
Copy Markdown
Member

Just to clarify, I am seeing panning + selection behavior only when zooming via multi-touch with selectionOnDrag and panOnDrag = [1, 2]. I cannot replicate with just a single finger.

None the less, fix is correct! Thank you for the contribution :)

@peterkogo
peterkogo merged commit f131bb9 into xyflow:main Aug 3, 2026
2 checks passed
@moklick moklick mentioned this pull request Jul 29, 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.

3 participants