clauderic / clauderic/dnd-kit

Svelte: Dropping an item from list A outside sortable list B causes unexpected behavior

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

Description

**Issue**

I'm running into an issue where the state of two lists seems to break when dropping an item outside of drop-container. I've included a link to stackblitz to see it an action. Also see the two clips attached.

What exactly happens
- When dropping the item outside of the designated drop-zone, the item does not return to its original or designated dropzone.
- The data however indicates that the two lists have not changed.
- The dropped item does not show up in the original zone
- The dropped item shows up in the other dropzone, but in a faulty state
- You can drag the "fake" item in the designated dropzone, and when you drop it duplicates itself to a correct item while leaving the fake on.
- When this happens the state also updates correctly.

Some more context:
- Increasing the size of the dropzone does not seem to work. I think the issue occurs when dropping it outside of collision detected causes this issue.
- In our actual project you can "lock" the dropped item into place, after which a new item occurs to be placed. That is not included in the reproduction.
- Removing the vertical axis constraint gives the same behavior

**Reproduction:**
This is a minimal reproduction of the issue: https://stackblitz.com/edit/vitejs-vite-ukm8ycwn?file=src%2Flib%2FTimeline.svelte

https://github.com/user-attachments/assets/2d13add2-2432-4eaf-b02c-21fd9fd7d8b6

https://github.com/user-attachments/assets/fe161941-efb1-4ac5-ade8-9d235d4c9167

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction at src/lib/Timeline.svelte and reproduce a drop outside the designated drop-zone. Trace the sortable and drop-container behavior while comparing the displayed lists with their reported data. Done means an item dropped outside a target returns to its original or designated zone without a duplicate or fake item.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.