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

[evercoyote]

I'm been working on porting a sortable list from @dnd-kit/core to @dnd-kit/react.

Once thing I've noticed is that if you have a DragDropProvider inside a scrollable container element, if you hit Enter to keyboard-drag an item, then hold down the Up or Down arrow key, you can drag the item entirely outside of the container element, presumably because the auto-scroller doesn't respond fast enough to keep up with the arrow key events.

I've made a temporary workaround to throttle arrow key events to no more than one per 100ms, which seems to stop the issue from happening:

    // During keyboard "dragging", disallow repeated keydown events more frequent than 100ms
    // dnd-kit 0.5 has a bug where holding down an arrow key can "drag" an element out of its container.

    const timeStampRef = useRef<number>(0);

    useEventListener(
        document,
        "keydown",
        (event: Event) => {
            const e = event as KeyboardEvent;
            if (dragMethod === DragMethod.KEYBOARD && e.key.startsWith("Arrow")) {
                // tried 50ms, was too fast
                if (e.timeStamp - timeStampRef.current < 100) {
                    e.stopImmediatePropagation(); // stopPropagtion() isn't enough; dnd-kit also listens on *document*
                } else {
                    timeStampRef.current = e.timeStamp;
                }
            }
        },
        true,
    );

    // Don't apply throttling when user is tapping the key (just when they hold it down)
    useEventListener(document, "keyup", () => {
        timeStampRef.current = 0;
    });

(useEventListener() is just a hook that calls addEventListener() on and removeEventListener() on cleanup. dragMethod comes from a custom monitor that you see the code for in #2118.)

[clauderic]

Thanks for the detailed write-up and for sharing your throttling workaround — that's a useful signal.

We read through the relevant source and your diagnosis lines up with how keyboard drags are meant to scroll:

• KeyboardSensor.sideEffects() (packages/dom/src/core/sensors/keyboard/KeyboardSensor.ts) explicitly disables the AutoScroller for the duration of a keyboard drag.
• Instead, Scroller (packages/dom/src/core/plugins/scrolling/Scroller.ts) listens for dragmove and, when the activator event was a keyboard event, calls this.scroll({by: event.by}). If it can scroll, it calls event.preventDefault() so the item scrolls the container rather than moving past its edge.

So the intended contract is exactly what you'd expect — arrow keys near the edge should scroll, not escape. The reason holding the key breaks it is that Scroller.getScrollableElements() is derived from a computed over dragOperation.position.current via getElementFromPoint(...). That's recomputed through the scheduler, so under keydown auto-repeat the scrollable-element set (and the scroll-intent threshold check in detectScrollIntent) can lag behind the actual position. Once the item has been moved past the container bounds, elementFromPoint resolves outside the container and the scroll interception stops applying entirely.

Marking this as a bug in @dnd-kit/dom for the maintainer to look at — no reproduction needed, your description is specific enough to trace.