Skip to content

fix: keep auto-scroller enabled during keyboard drag to prevent item escaping scrollable container - #2124

Open
waterWang wants to merge 1 commit into
clauderic:mainfrom
waterWang:fix/keyboard-drag-scroll-container
Open

waterWang wants to merge 1 commit into
clauderic:mainfrom
waterWang:fix/keyboard-drag-scroll-container

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Description

Fixes #2119

When keyboard-dragging an item inside a scrollable container, holding down the arrow key could move the item entirely outside the container because the AutoScroller plugin was disabled during keyboard drag.

Root Cause

The KeyboardSensor.sideEffects() method disabled the AutoScroller plugin when a keyboard drag started. Without the auto-scroller, the scrollable container would not scroll as the item approached its edges, allowing the user to move the item beyond the container bounds.

Fix

Removed the sideEffects() call from handleStart() and the sideEffects() method entirely. The AutoScroller and Scroller plugins now remain enabled during keyboard drag, allowing the container to scroll naturally as the keyboard-dragged item approaches its edges.

  • The Scroller plugin already handles per-keyboard-event scrolling via its dragmove event listener (line 104-118 in Scroller.ts)
  • The AutoScroller plugin provides continuous interval-based scrolling that fills the gap when the user holds down an arrow key

Test Plan

  1. Create a sortable list inside a scrollable container
  2. Tab to an item and press Enter to start keyboard drag
  3. Hold down the Arrow Down key
  4. Previously: item would scroll beyond container bounds
  5. Now: container scrolls along with the item, keeping it visible

…escaping scrollable container

KeyboardSensor previously disabled the AutoScroller plugin during keyboard
drag via its sideEffects() method. This meant that when a user held down
an arrow key to move a draggable item, the auto-scroller was disabled and
the item could be moved entirely outside the scrollable container element.

The fix removes the sideEffects() call and the sideEffects() method
entirely, keeping the AutoScroller enabled during keyboard drag so the
scrollable container scrolls naturally as the item approaches its edges.

The Scroller plugin already handles per-keyboard-event scrolling via its
dragmove event listener, and the AutoScroller's interval-based continuous
scrolling fills the gap when the user holds down an arrow key, preventing
the item from scrolling beyond the container bounds.

Fixes clauderic#2119
@changeset-bot

changeset-bot Bot commented Aug 11, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: af13ca7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

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.

You can keyboard-drag an item outside its scrollable container element by holding down the arrow key

1 participant