Svelte: Dropping an item from list A outside sortable list B causes unexpected behavior
- 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
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