Repository navigation
[bug] Removing items while dragging causes multiple issues #188
Description
Describe the bug
When you are dragging an item, if the list prop is updated such that it should remove the element you are dragging we have seen multiple bugs:
- The element dragging should be removed, but it consistently wasn't
- Multiple JavaScript errors were frequently thrown
To Reproduce
Steps to reproduce the behavior:
- Have a list of sortable elements in the
<ReactSortableJS />component - Start dragging an element
- While you're dragging, have an event trigger updating the
listprop so that the element you are dragging should be removed
Expected behavior
The element you are dragging should be removed with no errors thrown and the state of things continuing to work properly
Information
This is required. Issues without this critical information will be closed.
Versions - Look in your package.json for this information:
react-sortablejs = 6.0.0 (also had seen this same behavior with an earlier version)
react = 16.9.0
Additional context
Hoping to set up a codesandbox example at some point, just wanted to start the conversation here first
Activity
wdoug commentedon Oct 7, 2020
Here's a codesandbox to play around with: https://codesandbox.io/s/react-sortablejs-forked-oprbs?file=/src/index.js
I haven't been able to reproduce all the issues yet, but I've seen a few.
wdoug commentedon Oct 7, 2020
Example 1 (Recorded on Chrome):
wdoug commentedon Oct 7, 2020
Example 2 (Recorded on Firefox):
Error when dropping the element that should have already been removed. I didn't record it, but in this case, the element remains behind in the DOM after dropping even though React thinks it shouldn't be there and you can't interact with it.
wdoug commentedon Oct 7, 2020
Example 3 (Recorded on Firefox):
Unfortunately, I didn't capture the second error here, but the same issue happened after closing that overlay where the element existed in the DOM but couldn't be interacted with anymore.
wdoug commentedon Oct 8, 2020
Update: It turns out that at least some of these issues come from Sortablejs itself: SortableJS/Sortable#1943