clauderic / clauderic/dnd-kit

[experimental] Multiple sortable lists shows unexpected behavior after simple CSS modification

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

Description

I dabbled around with the example for multiple sortable lists (React), based upon the example given for the step "Moving items between columns".

After some CSS modifications the drag and drop started showing unexpected behavior, which i tracked back to the pointed where i simply changed the min height property of the columns (doubling it's value). now, dragging the b0 item down leaves an empty space at the top of the b-column and move there after ending the drag. similar things happen from time to time if i drag the a2 item to the right under the b1 item.

Here's the link to the sandbox, with only the single modification to the min height property.

https://codesandbox.io/p/devbox/mystifying-wave-qnhjcg?workspaceId=ws_cPfHtYgJXybxq2c4o86PW

Other than that, amazing work!

Contributor guide

Open the contributing guide

Research direction

Start by opening the linked CodeSandbox and reproducing the multiple sortable lists example with the doubled column min-height. Compare dragging b0 and a2 before and after the CSS change; done means the lists retain the expected item positions without empty spaces or unexpected moves.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.