Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flickering with DragOverlay after drop animation finished #304

Closed
medihack opened this issue May 29, 2021 · 0 comments · Fixed by #305
Closed

Flickering with DragOverlay after drop animation finished #304

medihack opened this issue May 29, 2021 · 0 comments · Fixed by #305

Comments

@medihack
Copy link
Contributor

medihack commented May 29, 2021

When using DragOverlay with React in concurrent mode, the dragged item inside the overlay just shows up again for some milliseconds, where it was released after the drop animation. This screencast demonstrates this problem:

dnd-kit-flickering

I am absolutely aware that concurrent mode is experimental, but I think it justs demasks an already existing problem. Because after the drop animation finished, it seems that the dragged node in the overlay gets its previous transform back (where it was released from). In React legacy mode, it doesn't matter as the DOM is not updated fast enough, but in concurrent mode, the node in the overlay shows up for some milliseconds where it was released before the overlay itself is removed.

A possible fix is to hide the dragged node in the overlay after the drag animation is finished. It will be recreated on the next drag anyway. I'll create a PR if you are ok with this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant