Summary:
We use SortableContainer in dynamic mode. When the mouse is pressed (so onMouseDown has triggered, but onMouseUp has not yet) and a render happens then draggingIndex is set, the render will create a dragging element but will then not delete it once mouse is released again.
Reproduction:
This behaviour can be reproduced with the demo:
http://jasonslyvia.github.io/react-anything-sortable/demo/#/dynamic
Simply open debugging tools, run this statement in the console:
setTimeout(function(){ document.querySelectorAll("[data-reactid='.0.1.1.0']")[0].click() },5000)
(which will trigger the button on the page after 5 seconds).
Now click and hold the second element (titled "225") without moving the mouse (so onMouseMove does not trigger) and wait for the timer to expire. In the DOM Viewer you can see that the render happens once the button is pressed, the element "_dragging" appears but does not disappear when you release the mouse.
In the demo the placeholder with the title "225" stays over the first element.
See resulting screenshot here:
See resulting DOM here:
Fix:
We have fixed this issue for us by checking for the isDragging state in the renderItems method, as follows:
if (index === this._draggingIndex && this.state.isDragging) {
draggingItem = this.renderDraggingItem(item);
}
Summary:
We use SortableContainer in dynamic mode. When the mouse is pressed (so onMouseDown has triggered, but onMouseUp has not yet) and a render happens then draggingIndex is set, the render will create a dragging element but will then not delete it once mouse is released again.
Reproduction:
This behaviour can be reproduced with the demo:
http://jasonslyvia.github.io/react-anything-sortable/demo/#/dynamic
Simply open debugging tools, run this statement in the console:
setTimeout(function(){ document.querySelectorAll("[data-reactid='.0.1.1.0']")[0].click() },5000)(which will trigger the button on the page after 5 seconds).
Now click and hold the second element (titled "225") without moving the mouse (so onMouseMove does not trigger) and wait for the timer to expire. In the DOM Viewer you can see that the render happens once the button is pressed, the element "_dragging" appears but does not disappear when you release the mouse.
In the demo the placeholder with the title "225" stays over the first element.
See resulting screenshot here:
See resulting DOM here:
Fix:
We have fixed this issue for us by checking for the isDragging state in the renderItems method, as follows: