Not working in Firefox #869

schmaluk · 2017-09-07T12:53:04Z

Hello,
reactdnd is not working anymore in the latest Firefox-Version 55.0.3
Using reactdnd version:
"react-dnd": "^2.5.1",
"react-dnd-html5-backend": "^2.5.1",

Does anyone knows the latest version of reactdnd where Firefox is working?

schmaluk · 2017-09-07T13:15:17Z

React-dnd does work however in Firefox 55.0.2.

Paddy-Hamilton · 2017-10-06T11:34:12Z

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

alexfi · 2017-10-13T13:28:55Z

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.

bjrmatos · 2017-10-13T14:56:10Z

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

lvpro · 2017-10-30T16:43:40Z

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

…newer Firefox versions and potential other browsers as well

erwinverdonk · 2017-11-29T12:06:30Z

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.

fikip · 2017-12-20T12:24:21Z

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.

yankopetrov · 2017-12-24T11:48:22Z

I also have problems with FF and OSX 10.13.1

Edit: I found another issue similar to this one (#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.

Paddy-Hamilton · 2018-01-09T13:18:19Z

@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.

Paddy-Hamilton · 2018-01-09T13:19:18Z

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

yankopetrov · 2018-01-09T13:23:12Z

@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.

erwinverdonk · 2018-01-09T14:42:10Z

@Paddy-Hamilton: Yeah I see it did not auto link here, so here is the link to PR: #928

dmitrystril · 2018-01-31T13:26:34Z

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

…lace 'this' with '_' mistake and add type

… drag has ended

… 'mousemove' event listener delay

…newer Firefox versions and potential other browsers as well

…will be added at the correct time

dmitrystril · 2018-02-08T10:58:53Z

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>)}

Paddy-Hamilton · 2018-02-13T08:46:37Z

@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.

#928) * #869 - Fix issue which causes drag operation to not work on newer Firefox versions and potential other browsers as well * #869 - Increase delay to make sure the 'mousemove' listener will be added at the correct time

gsantiago · 2018-04-28T17:18:10Z

The Chess example still does not work in FF 59.0.2

adamhooper · 2018-05-25T19:14:31Z

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

Click and hold the knight
Move to a valid square (one that renders green)
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.

darthtrevino · 2018-05-25T20:09:19Z

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

adamhooper · 2018-05-25T22:08:22Z

Fedora 28

JacksonGariety · 2018-05-30T03:24:00Z

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?

darthtrevino · 2018-05-30T05:23:00Z

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

darthtrevino · 2018-05-30T05:54:34Z

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.

lvpro · 2018-05-30T13:22:32Z

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

koox00 · 2018-06-05T12:10:45Z

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.

darthtrevino · 2018-06-05T14:01:30Z

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. ***@***.***> 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 <#869 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAG7iExIfA_El7IoR80oWgIvo87n2ABBks5t5nVFgaJpZM4PPxNf> .

koox00 · 2018-06-05T14:17:13Z

@darthtrevino yeah of course!

Skylsmoi · 2019-06-17T13:45:16Z

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

SystemParadox · 2019-07-31T10:20:53Z

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.

stale · 2019-09-29T10:51:21Z

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.

SystemParadox · 2019-09-30T07:53:38Z

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

darthtrevino · 2019-10-02T02:33:18Z

@SystemParadox What OS are you using?

SystemParadox · 2019-10-03T15:11:09Z

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

Spaubleit · 2019-10-09T09:57:21Z

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

SystemParadox · 2020-07-21T10:22:16Z

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.

devyeshtandon · 2021-09-18T01:53:17Z

It's 2021 and chess example still does not work.
Firefox version: 92.0
OS: Ubuntu 18.04

darthtrevino · 2021-09-18T02:19:55Z

I haven't had time to dig into a triage here, although I can confirm this is a case in Windows as well with FF 92. PRs are welcome.

Edit: looks fine running locally, there may have been a transient dependency update that fixed this

This fixes a bug where the cards were not sortable in firefox due to a drag and drop bug. The ref for the drag item needs to be on the top level component apparently. react-dnd/react-dnd#869 (comment)

markbeacom · 2022-09-12T14:16:13Z

For anyone who is still experiencing this issue, i found that on firefox, using a button with the ref drag will not work sadly.

Not exactly sure why this is the case but i avoided the issue by just replacing the button with a div and remove the button element.

erwinverdonk pushed a commit to erwinverdonk/react-dnd that referenced this issue Nov 28, 2017

react-dnd#869 - Fix issue which causes drag operation to not work on …

6cb0595

…newer Firefox versions and potential other browsers as well

erwinverdonk pushed a commit to erwinverdonk/react-dnd that referenced this issue Feb 6, 2018

react-dnd#869 - Fix arguments passed as array to setTimeout + fix rep…

4db4dd0

…lace 'this' with '_' mistake and add type

erwinverdonk pushed a commit to erwinverdonk/react-dnd that referenced this issue Feb 6, 2018

react-dnd#869 - Remove type as it is not needed

2591060

erwinverdonk pushed a commit to erwinverdonk/react-dnd that referenced this issue Feb 7, 2018

react-dnd#869 - Add clearTimeout in case the timeout is reached after…

1b1b74a

… drag has ended

erwinverdonk pushed a commit to erwinverdonk/react-dnd that referenced this issue Feb 7, 2018

react-dnd#869 - Replace 'setTimeout' with 'replaceAnimationFrame' for…

dfedd59

… 'mousemove' event listener delay

erwinverdonk pushed a commit to erwinverdonk/react-dnd that referenced this issue Feb 7, 2018

react-dnd#869 - Fix issue which causes drag operation to not work on …

e1e418e

…newer Firefox versions and potential other browsers as well

erwinverdonk pushed a commit to erwinverdonk/react-dnd that referenced this issue Feb 7, 2018

react-dnd#869 - Increase delay to make sure the 'mousemove' listener …

ba336d9

…will be added at the correct time

This was referenced Mar 22, 2018

Bump react-dnd-html5-backend from 2.5.4 to 2.6.0 koscelansky/Dama#7

Merged

Bump react-dnd from 2.5.4 to 2.6.0 koscelansky/Dama#8

Merged

stale bot added the wontfix label Sep 29, 2019

stale bot removed the wontfix label Sep 30, 2019

darthtrevino added the pinned won't become stale from stalebot label Oct 2, 2019

sballesteros mentioned this issue Jan 29, 2020

.draggable-role-badge--dragging with visibility issues causes issues on firefox PREreview/rapid-prereview#71

Open

Not working in Firefox #869

Not working in Firefox #869

Comments

schmaluk commented Sep 7, 2017

schmaluk commented Sep 7, 2017

Paddy-Hamilton commented Oct 6, 2017 • edited

alexfi commented Oct 13, 2017 • edited

bjrmatos commented Oct 13, 2017 • edited

lvpro commented Oct 30, 2017 • edited

erwinverdonk commented Nov 29, 2017 • edited

fikip commented Dec 20, 2017

yankopetrov commented Dec 24, 2017 • edited

Paddy-Hamilton commented Jan 9, 2018

Paddy-Hamilton commented Jan 9, 2018

yankopetrov commented Jan 9, 2018

erwinverdonk commented Jan 9, 2018

dmitrystril commented Jan 31, 2018

dmitrystril commented Feb 8, 2018

Paddy-Hamilton commented Feb 13, 2018

gsantiago commented Apr 28, 2018

adamhooper commented May 25, 2018

darthtrevino commented May 25, 2018

adamhooper commented May 25, 2018

JacksonGariety commented May 30, 2018

darthtrevino commented May 30, 2018

darthtrevino commented May 30, 2018

lvpro commented May 30, 2018

koox00 commented Jun 5, 2018 • edited

darthtrevino commented Jun 5, 2018 via email

koox00 commented Jun 5, 2018

Skylsmoi commented Jun 17, 2019 • edited

SystemParadox commented Jul 31, 2019

stale bot commented Sep 29, 2019

SystemParadox commented Sep 30, 2019 • edited

darthtrevino commented Oct 2, 2019

SystemParadox commented Oct 3, 2019

Spaubleit commented Oct 9, 2019 • edited

SystemParadox commented Jul 21, 2020

devyeshtandon commented Sep 18, 2021 • edited

darthtrevino commented Sep 18, 2021 • edited

markbeacom commented Sep 12, 2022

Paddy-Hamilton commented Oct 6, 2017 •

edited

alexfi commented Oct 13, 2017 •

edited

bjrmatos commented Oct 13, 2017 •

edited

lvpro commented Oct 30, 2017 •

edited

erwinverdonk commented Nov 29, 2017 •

edited

yankopetrov commented Dec 24, 2017 •

edited

koox00 commented Jun 5, 2018 •

edited

Skylsmoi commented Jun 17, 2019 •

edited

SystemParadox commented Sep 30, 2019 •

edited

Spaubleit commented Oct 9, 2019 •

edited

devyeshtandon commented Sep 18, 2021 •

edited

darthtrevino commented Sep 18, 2021 •

edited