svelte-dnd-action
svelte-dnd-action copied to clipboard
isaacHagoel
Rapid mouse drag on slower client causes duplicate element with shadow ID
First off, thank you for this library. Its been working great so far and it feels really nice to have a Svelte focused drag and drop solution.
Rapidly dragging (like flicking the mouse) a draggable element from a zone to a position outside any other zones can cause a duplicate element to appear in a zone, but with the ID changed to the shadow element ID. In normal use case this would also trigger multiple consider events, however in this case it only generates the first, initial DRAG_STARTED trigger. Hovering the currently dragged element over any other zone will remove the "duplicate" element and resume expected behavior. By slow, I mean CPU slowness. I didn't see any other issues regarding this.
I encountered this on a page that has hundreds of zones with hundreds of draggable items inside a random assortment of zones. Likely the processing time in my backing derived stores is what made this appear more readily. Getting a replication in a REPL was more difficult.
For a basic example, I can replicate this (sometimes) in some of the examples provided in the readme using the Chrome devtools performance tab, and setting the CPU throttling to 6x slower. https://svelte.dev/repl/4d23eb3b9e184b90b58f0867010ad258?version=3.24.1 is one of the ones I was able to replicate the issue in using this technique.
I'm currently using dynamically generated zones, of which there are many. To do this I use derived stores and wrap my onConsider and onFinalize methods in a context that can be shared to the children of a wrapping component. Using the same technique of CPU throttling, you can get it to replicate in this REPL that more closely mirrors my use case: https://svelte.dev/repl/8d3af8c3f0ba41caa8ede3d3338727a8?version=3.52.0.
I can also attempt to make a video of this behavior in case you aren't able to replicate it yourself.
If dropped outside any zones this will self-recover if the items list is set back to the passed event. Additionally my use case is pretty complicated and I acknowledge that having hundreds of zones with a large backing dataset is not ideal. My question is, is there any way to prevent this from displaying in the first place? Is this some kind of race condition between the library and my own consider/finalize functions that I could prevent?
Hi, Can you please call setDebugMode(true) (see README) and paste the debug output from drag start until where you have the duplicate item (if you make a video please do it with the console showing the debug messages as they get printed)?
Created using the second example, with a majority of the data removed for succinctness. There are a couple Chrome generated logs in there as well.
so looks like it didn't trigger handleDraggedLeft (in pointerAction.js) for some reason.
if you have time to debug (clone the lib, link locally and trace what's happening) it would be great.
otherwise i will try to find time to look into it later this week
Still reproducible for me, using the same linked REPL at the top and using Chrome Devtools, lowering my CPU performance 4x. Lowering CPU performance seems to be the only way to reliably reproduce. In my real world case, the amount of data and stores on the screen was the likely cause of any lag that made this issue pop up.
This does seem self-recover, so its just a visual bug. I've since released the app I was building to production, and I have not seen this behavior "in the wild".
Hello! Caught a similar thing recently. A picked item sometimes gets duplicated on consider if we have multiple lists (dunno if the latter is a required condition). A copy of the picked item (not a shadow) just appears on it's former place after I picked and moved it a little outside the list left or right.
+
And if after this I keep pick-and-drag items at some point on the other dragging an error appears (410 line of pointerAction.js): in older version ...getRootNode of undefined; in the current - ...closest of undefined (which, of course, crashes app). Can't share repl yet. I'll try to make it next week.
@kkarpeev which version of the lib are you using? Can you tell me how to reproduce (create a REPL or use an existing one and provide instructions and/or a screen capture)? EDIT: I see that I missed the last sentence. Sorry. Yeah if you can make a REPL it would be great.
@isaacHagoel About versions - I tried the latest and 0.9.22. Both are crashing at the same place. Latest while calling .closest() of undefined and 0.9.22 when calling .getRootNode() of undefined. I'll try to reproduce this at repl, yeah. And if you have any thoughts on what can hypothetically cause that, please share :) Thanks in advance!