clauderic / clauderic/dnd-kit

Resizing node while it is being dragged breaks RestrictToElement modifier

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

Description

Hello. I am working on making a windows 98 desktop themed website. When you attempt to drag a window that is maximized, it first unmaximizes it like in a real desktop OS. However, this breaks the RestrictToElement modifier. The boundaries become incorrect in an inconsistent manner. It is like the drag boundary gets randomly shifted. This scenario can be reliably reproduced by using RestrictToElement and resizing the dragging element while it is moving. I've created an MRE to demonstrate this issue

MRE deployment https://host.gradyn.com/dnd-kit-mre/
MRE source https://github.com/GNUGradyn/dnd-kit-mre

Thanks

Contributor guide

Open the contributing guide

Research direction

Start by running the deployed MRE at https://host.gradyn.com/dnd-kit-mre/ and compare it with the source at https://github.com/GNUGradyn/dnd-kit-mre. Reproduce a drag with RestrictToElement while resizing the dragged element, then trace the modifier's boundary calculations. Done means the drag remains constrained to the correct element after resizing.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
50/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.