Randomly totally broken in Firefox

[hyperknot]

In Firefox, sometimes, react-sortable-tree can get into a totally locked up state. This means that:

1. Dragging doesn't work at all.
2. Visually it looks bad. Non dragged items are thought to be dragged, in the rowCancelPad state.
3. Some static nodes are thought to be 0.5 opacity nodes, like while dragging, but actually they are not dragged.
4. canDrop is actually not called.

The worst part of this is that reloading the page doesn't solve this issue. Once a page gets into this state, it'll stay this forever. The only fix is to open a new tab and close the old one.

I'm trying to make a reproducible case, but my code is basically node-renderer-default and tree-node-default simplified.

It happens more frequently if I'm clicking on an item quickly after page load.

[hyperknot]

OK, I could reproduce it with the official examples on the official pages.

One particular way to trigger it is to drag one node and then quickly double click. Playing around a bit with dragging and quickly double clicking can get into this state in Firefox.

It kind of thinks it's in a continuous dragging state.

[hyperknot]

You can see how this broken state persist after page reloads.

[wuweiweiwu]

This is super weird. I don't think its with the react component though. Initially I thought there was some state inconsistency. But the reload should reset the state.

Thus I think the issue is with the HTML dnd backdend..

[hyperknot]

I was thinking along the way. Maybe opening an issue in dnd is a good idea.

[wuweiweiwu]

Definitely needs more investigation. I'm also thinking of getting rid of the dependency on react-dnd / html backend entirely. possibly using whatever react-sortable-hoc uses in the backend

[cormacrelf]

This is an awful bug in Firefox that is not fixed yet. react-dnd/react-dnd#1000

You could try https://github.com/zyzo/react-dnd-mouse-backend -- it would skip over all the browser-specific HTML5 bugs that just keep popping up.

Also, react-sortable-hoc doesn't use anything in the backend. It's all manual mouse/touch events.

[wuweiweiwu]

Yeah... I wonder if its worth just writing everything manually. I'll talk to the author of react-sortable-hoc

I'll definitely check the mouse backend. Thanks @cormacrelf

[cormacrelf]

(Or even multi-backend with Mouse + Touch. A while back I added a new MouseTransition to multi-backend that makes it easy.)

…

On 8 Jul 2018, at 17:15, Wei-Wei Wu ***@***.***> wrote: Yeah... I wonder if its worth just writing everything manually. I'll talk to the author of react-sortable-hoc I'll definitely check the mouse backend. Thanks @cormacrelf — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.