jasonslyvia / jasonslyvia/react-anything-sortable
Bug when re-rendering occurs while mouse is pressed
- Dominant language
- JavaScript
- Stars
- 457
- Forks
- 82
- PR merge metrics
- No merged PRs in 30d
Description
**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);
}
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the SortableContainer dynamic demo and trace the renderItems method involved when dragging begins. Reproduce the delayed render while holding the second item, then confirm that the temporary dragging element and placeholder are removed after mouse release.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 42/100