React-dnd: Not working in Firefox

React-dnd does work however in Firefox 55.0.2.

not working in 56.0 either, no errors thrown. Simply unable to click and drag at all. works fine in Chrome

Any ideas on this one?
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",

Firefox: 56.0
Often times stops working. Especially if many tabs are opened.

can someone point to a repository with a sample case in which react-dnd is failing? i have an app that uses react-dnd a lot but i don't see any problem in firefox 56.

also please make sure to specify the OS that you are using, i have seen that recently html5 Drag and Drop API is having some inconsistencies in different OS

I've observed issues with FF 56 on Linux, as well (didn't test on Windows or OSX).

http://react-dnd.github.io/react-dnd/examples-sortable-simple.html

Trying that simple example, an element will move at max 1 position and then no longer shift elements, if for example, I grab the bottom element and try to move it up to the top.

Also discussed in #778

For our case - DnD not working in FF, example case https://react-dnd.github.io/react-dnd/examples-drag-around-naive.html - I did fix the issue with the pull request I submitted yesterday. Perhaps you could try and report back whether it solves your case as well.

Still having issues on FF 57.0.1 on Ubuntu 16.04. I'm not able to drag & drop at all, seems like the drag event starts but cancels immediately afterwards. Works fine in chrome.

I also have problems with FF and OSX 10.13.1

Edit: I found another issue similar to this one (https://github.com/react-dnd/react-dnd/issues/778). Check it for more details. Also tried the beta FF Nightly(https://nightly.mozilla.org/) and the bugs are gone. Maybe this is FF issue and not react-dnd.

@yankopetrov

I'm still experiencing the problems in Nightly, but it seems to break a whole lot more in the app than just RDandD. So not sure I trust that as an indication if FF is the real cause of the bug, and if they have fixed it.

@erwinverdonk , could you share your fix ? what was the PR?
cheers

@Paddy-Hamilton yes with FF Nightly still some bugs appears. Working with chrome and safari like a charm so should be FF issue. My case is exact the one in the reported FF issue.

@Paddy-Hamilton: Yeah I see it did not auto link here, so here is the link to PR: https://github.com/react-dnd/react-dnd/pull/928

So does anyone know what is the issue?
I'm using FF 57.0.4 64bit on Ubuntu 17.04 and it's still not working. Even this example: http://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html

Hi, I've found some sort of workaround that worked for me. My drag-n-drop worked fine in Chrome but didn't work in FF at all.
So my code before:
render() { return ( isDragging ? null : <div className='myDraggableComponent'>...</div>)}
And after:
render() { return <div className='myDraggableComponent' style={{ visibility: isDragging ? 'hidden' : 'visible' }}>...</div>)}

@dmitrystril @yankopetrov

The issue was still their for me in FF Nightly so I had to look for alternatives, I came across react-beautiful-dnd and it works like a charm in FF as well as all other major browsers, and has less markup than react-dnd which is a bonus.

The Chess example still does not work in FF 59.0.2

The chess tutorial does not work on Linux with FF 60.0:

1. Click and hold the knight
2. Move to a valid square (one that renders green)
3. Move to an adjacent square

Expected results: the square is highlighted red
Actual results: the green square stays highlighted, forever

Also: no matter what square my cursor is on, releasing the mouse cancels the drag.

Ae you on Linux @adamhooper? I can't reproduce in OSX

Fedora 28

I was hoping that installing today's 3.0.2 update would fix it. Unfortunately, it is still broken. I have only tested on Linux, however. Has anyone tried the example on a different operating system?

The 3.x updates have been mainly targeted at improving types. I don't have a Linux machine, but if someone can reproduce this and cut a PR, that would be great

I'm going to look into different cross-browser testing tools we can use to catch issues like this. The existing examples should be a pretty good baseline for tests.

I can confirm I've only seen this problem on the Linux version of Firefox. Works fine on Windows.

If you look at the sortable examples simple doesn't work, but stress test works.
The difference is that stress test is updating the state inside a requestAnimationFrame.

Using requestAnimationFrame solves it for me.
Firefox for Linux.

Got it, that makes sense. so it's probably something to do with the goofy
settimeouts that were intended just for Firefox. If I cut a branch with a
proposed fix, would you be willing to npm link it and test it on Linux?

On Tue, Jun 5, 2018, 5:10 AM Kyriakos Z. notifications@github.com wrote:

If you look at the sortable examples simple doesn't work, but stress test
works.
The difference is that stress test is updating the state inside a
requestAnimationFrame.

Using requestAnimationFrame solves it for me.
Firefox on Linux.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/react-dnd/react-dnd/issues/869#issuecomment-394685648,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAG7iExIfA_El7IoR80oWgIvo87n2ABBks5t5nVFgaJpZM4PPxNf
.

@darthtrevino yeah of course!

I just ran into a similar issue.
Although I already had latest versions of Firefox and react dnd (on linux).

What was causing my issue was that my drag handler (component with ref={props.connectDragSource}) was inside a <Link> from react router.

I don't know why it was causing the issue but as soon as I put it outside the  <Link>, everything worked fine.

Posting here in case it helps someone

I've got the same issue in Firefox 60.8.0esr on Debian 10.

Updating the state inside requestAnimationFrame fixes it for Firefox, but it makes dragging and Chrome sluggish and broken.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Please do not close this. It is still broken in Firefox 60.9.0esr.

@SystemParadox What OS are you using?

Linux (Debian 10). I haven't had chance to try it on Windows yet but it seem very strange for it to be different.

Fedora 30
All works fine in Firefox 69.0.1
Broken in Firefox Nightly 70.0a1 (2019-08-21)

• Works in 68.10.0esr
• Works in 78.0.2

If they broke it in 70.0a1 then it would seem this keeps breaking for some reason, which is a bit concerning. If it breaks again then we really need to create a bare minimum test case and submit a ticket to the firefox devs.