clauderic / clauderic/dnd-kit

[experimental] Item moves to top when dragging down in shorter sortable column with move helper

Open
#1,718 1 comment 3 reactions 0 assignees View on GitHub
bug experimental helpers react triage:done
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

## Description
When using multiple sortable columns with the move helper (as shown in the documentation example), dragging an item downward in one column unexpectedly moves it to the top of that column. This behavior occurs only when another column contains significantly more items, creating excess vertical space in the shorter columns.

![Image](https://github.com/user-attachments/assets/626c7796-8bd0-495a-bd8b-ee31f90bc386)

## Steps to Reproduce
1. Open codesandbox from documentaion https://codesandbox.io/p/sandbox/3w2vd6?file=%2FApp.js
2. Add more element to the the "A" array

## Environment
- @dnd-kit/react": "^0.1.17
- @dnd-kit/helpers": "^0.1.17

## Expected Behavior
For the element being dragged to stay at the bottom of the list

Contributor guide

Open the contributing guide

Research direction

Start with the documentation example and its linked CodeSandbox, especially App.js, then reproduce the issue after adding more items to the A array. Trace the move-helper behavior for downward dragging in the shorter column; done means the dragged item remains at the bottom rather than jumping to the top.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.