New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React DnD not work on Chrome 59 #789
Comments
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. 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 |
I have the same problem although not every time, just in some cases, and for example that case is: |
@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. |
@hunterbmt thanks for demystifying 😄 |
@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
but login screen always pop up 😕 |
can anyone in this thread provide a reproducible case of the problem? i'm using 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: as for windows info: 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 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) |
@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 thnks for the repository, i will try to dive into the problem and look for a solution that makes everybody happy. |
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 😄 |
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. #820 |
Any news regarding this issue? |
@ms88privat #820 resolves the exception, but not the initial problem that on Chrome (I'm using 67) 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 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, |
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. |
After upgrading to Chrome 59, react-dnd no longer works. After a bit investigating, it looks like Chrome no longer triggers "dragend" event which leads to react-dnd misunderstand when I try to drag the second item/time
Anyone experience the same issue?
The text was updated successfully, but these errors were encountered: