React-dnd: React DnD not work on Chrome 59

Not the case; it work's perfectly fine. Try running Chrome without any extensions

@theTechie did you check on Mac on Windows ? On Mac it's working normally.

i checked on Mac. Is it a problem with a specific platform?

@theTechie for some reason, react-dnd don't trigger 'dragend' as normal. I tested on couple machine, one Mac has the same issue, all Windows has this issue. Any thought?

I tested on multiple platforms Windows 8.1 / Windows 7 on Chrome and also on IE 10 and IE 11. It works fine for me.

@hunterbmt - Do you see any errors in the console ? could you share a GIF for some context?

@theTechie I tested on example site of react dnd, didn't have any issue. But in our application, Chrome 59 didn't trigger 'dragend' in some scenarios which works perfectly normal on Chrome 58, FF, Safari and even IE.
I fixed by manually trigger 'dragend' after 'drop' if the browser didn't trigger it after a while.
I don't know if others fail into this issue as well, if that's the case, I could move the fix into react-dnd.

Looking at the changelog of Chrome 59 but didn't find anything, if you have any insight, I will appreciate the input a lot.

@hunterbmt I think it could be something peculiar to your code; even i have used react-dnd in multiple instances and all of them work fine on Chrome 59.

Unfortunately, i am unable to tell you why this would be happening. Maybe, i can try and find something if you are ok sharing your code here.

I have the same problem in Chrome 59.0.3071.86 on Windows. It works fine in Firefox, and worked fine in earlier Chrome versions. package.json:

{
  "dependencies": {
    "react-dnd": "2.1.4",
    "react-dnd-html5-backend": "2.1.2",
  }
}

The result is the same with 2.4.0/2.4.1

Solved with this hack:

const ModifiedBackend = (...args) => {
    const instance = new HTML5Backend(...args);

    // Fix Chrome 59 not sending a DragEnd after Drop, which other browsers do and react-dnd expects
    const originalTopDrop = instance.handleTopDrop;
    const originalTopDragEndCapture = instance.handleTopDragEndCapture;
    let dragEndTimeout;
    instance.handleTopDrop = (e, ...args) => {
        dragEndTimeout = setTimeout(() => {
            originalTopDragEndCapture(e, ...args);
        }, 0);
        originalTopDrop(e, ...args);
    };
    instance.handleTopDragEndCapture = (e, ...args) => {
        clearTimeout(dragEndTimeout);
        originalTopDragEndCapture(e, ...args);
    };

    return instance;
};

// Decorate root elements with this
export default DragDropContext(ModifiedBackend);

@awestroke I end up with quite similar hack but the issue still happen when I quick drag and drop in undroppable area, Chrome fail to trigger 'dragend' and of course, won't trigger 'drop' as well. Could you check from your side ?

@hunterbmt I have no problems with dropping in undroppable areas. I haven't checked which events are triggered, but react-dnd doesn't enter a corrupted state, so everything seems to work well.

I created a PR to fix this issue and potential issues by simplifying the condition to trigger endDrag
https://github.com/react-dnd/react-dnd/pull/801

I have the same problem although not every time, just in some cases, and for example that case is:
I have a widget that can be dropped inside drop area, and that drop area will render some html when widget is dropped. If I choose to drop video widget it will render iframe and it breaks and I can't drag any other widgets after that (dragend event is not fired). But if I replace that iframe with some text or image, it works perfectly fine, and it was working before Chrome 59, and it works in any other browser, I can't figure it out, is the problem in Chrome or react-dnd?

@rogyvoje I believe that Chrome changed something in event triggering for 'dragend'. Tried to search for more information but I don't see them mention that anywhere.
Btw, depending on 'mousemove' after 'dragstart' make more sense and simpler that depending on 'dragend' in most of the case and 'mousemove' in some cases (dragging element removed from DOM) as my PR.

@hunterbmt thanks for demystifying 😄
but how can I use your pull request through npm/yarn? Because it seems that it is not merged, or am I wrong? 😕

@rogyvoje I think you can, instead of the version just point to my branch directly. PR was merged but react-dnd is not yet released new version so you cannot get it directly from react-dnd npm/yarn.

@hunterbmt
I tried to do it like this:

npm install git+https://github.com/react-dnd/react-dnd.git#41eb8caa0bc106c9edf0d3ca628b49e70525090b

but login screen always pop up 😕

can anyone in this thread provide a reproducible case of the problem? i'm using react-dnd a lot but i can not identify any issue on Chrome 59, so i'm very interested to have a reproducible case where react-dnd fails because Chrome 59 does not fire drag/drop events correctly.

i think if there is a problem, it should be reproducible very easily by some of you that saw the problem in the first place, so please try to take the time to post a reproducible case (it can be a github repo or code posted here https://codesandbox.io/) and try to provide any meaningful information (like OS, version of react-dnd, etc). thnks!

@bjrmatos here, I made one, this one is my case and I hope it will help!

https://github.com/rogyvoje/react-dnd-chrome-59

tested it on chrome 59, and on current update:
Version 60.0.3112.78 (Official Build) (64-bit)

as for windows info:
OS Name: Microsoft Windows 10 Pro
OS Version: 10.0.14393 N/A Build 14393

Tested on Chrome: Version 55.0.2883.87 (64-bit) (on Linux/Mint 18) and works perfectly...

@rogyvoje thnks! i will take a look later, let's see if i can see the problem in my windows 7 VM, otherwise i will try another VM with windows 10. thnks!

hi @rogyvoje i've tried your repository directly in the latest chrome release as you said that you had the same problem there (Version 60.0.3112.78 (Official Build) (64-bit)- Windows 10 PRO) but i don't see any error.

this is the expected result, right?

are there any/more other steps to reproduce your issue?

i've installed the dependencies with [email protected] (instead of using yarn) and just for the record here are the exact versions of dependencies installed:

NOTE: i'm using a windows 10 PRO VM (because my main OS is OSX El Capitan, in which the issue with chrome does not exists)

and same result with all my chrome extensions disabled:

@rogyvoje i've just read your past comments and now i can reproduce the problem, as you say the first drag works, but if someone tries dragging a second time the Cannot call hover after drop error appears.

thnks for the repository, i will try to dive into the problem and look for a solution that makes everybody happy.

seems like the bug is confirmed: https://bugs.chromium.org/p/chromium/issues/detail?id=737691&q=dragend&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

https://stackoverflow.com/questions/44764343/dragend-event-not-firing-in-chrome-when-an-iframe-is-moved-in-drop-function

for the record i can reproduce the error with the same example also in Chrome (60) Mac OS (El Capitan) (not sure about if it was present also in Chrome 59 for Mac), so it is failing everywhere when using Chrome (>=59) and when using iframes 😂

@bjrmatos great, glad that you successfully reproduce it 😄
just not sure what's going to happen next, should we wait for Chrome 61? 😂

just not sure what's going to happen next, should we wait for Chrome 61?

maybe, anyway i'm trying to find a nice patch that makes react-dnd work in Chrome 59, 60, so i will post here more updates later 👍

I think this solves the problem. https://github.com/react-dnd/react-dnd/pull/820
It is already merged, but not released.

Any news regarding this issue?
I'm still having issues in the latest chrome...

@ms88privat #820 resolves the exception, but not the initial problem that on Chrome (I'm using 67) source.endDrag is never called when an iframe gets rendered.

Before 3.0 we used the workaround provided by @0rvar, but with the stricter TS typings it's not possible to override instance methods or private class methods.

You can reproduce it by adding endDrag to Video.js in @rogyvoje`s test repo

const source = {
    beginDrag(props) {
        return {
            renderVideo: true
        };
    },
    // Add end drag
    endDrag(props, monitor) {
        if (!monitor) return;
        // Only gets called when the iframe is already rendered
        console.log("endDrag");
    }
};

The first time you drag it, endDrag isn't called for Chrome.

it also freezes when you include in iframe in the page inside chrome (59 till current) @0rvar 's fix works in this case as well

This is fixed now in chrome 72, which was released yesterday.

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.