jasonslyvia / jasonslyvia/react-anything-sortable

Bug when re-rendering occurs while mouse is pressed

Open
#73 3 comments 0 reactions 0 assignees View on GitHub
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:
![image](https://cloud.githubusercontent.com/assets/151508/19180849/5419efba-8c69-11e6-9339-c502403adfb8.png)

See resulting DOM here:
![image](https://cloud.githubusercontent.com/assets/151508/19180843/4cd48094-8c69-11e6-9503-0f944b59af72.png)

**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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.