Uncaught Invariant Violation: Cannot call hover while not dragging. error in Chrome 77.0 when using iframes #1534
Comments
|
Seeing the same issues in our app, we also have our DND code within an iframe and its completely broken for users with the newest chrome update. Errors: |
|
This is also affecting some of the drag and drop functionality in the various editor apps at HubSpot (that use react-dnd inside an iframe). Still digging into the extent of the problem. And I have replicated the problem demonstrated by the codesandbox example in Chrome 77.0.3865.75 on Windows 10. |
|
I haven't had a chance to compare it with the latest HTML5 backend on react-dnd master, but we have deployed a temporary, hacky fix to our custom HTML5 backend:
Anecdotally, that |
|
+1 |
|
I get this same error in Vivaldi 2.8.1664.30 (Official Build) snapshot (64-bit) on every component, not just those in an iframe, whereas Chrome seems to work perfectly. I tried making the change that @timmfin suggested but it did nothing for me |
|
This error is pretty devastating for us. We have multiple apps that effectively broke completely as users updated Chrome. @timmfin 's workaround is working for us, thanks! |
|
I've been playing around with this for a few hours tonight on the master branch. It's not throwing an exception anymore but I cannot drop any items. The setTimeout workaround seems to fix it. It looks to me like we get a handleTopDragEndCapture followed by a handleDrop then a handleTopDrop If we call endDrag() within handleTopDragEndCapture the drop events don't fire at all in an IFRAME. How odd. |
|
Interestingly when not in an IFRAME I only see the dragend events when a drag is cancelled not right before a successful drop. That seems to be the difference. |
|
Here we go, I think this is the issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1005747 |
|
Has anyone back ported the workaround to older versions of this library? Like 2.6.0 😅 |
|
As a workaround, just for desktop use, I've been using https://github.com/zyzo/react-dnd-mouse-backend as an alternative to the HTML5 backend. It seems to work fine for me |
|
Just FYI, I'm seeing this on Linux now as well. |
I also tried this fix, but the mouse backend is really buggy in FireFox. |
|
@Cristy94 It seems that he deleted the comment, but https://www.npmjs.com/package/@vvitto/html5-backend-chrome-dnd-fix was posted before. I haven't tested it, but it might work? |
|
@TheConfuZzledDude @Cristy94 it works for me, but you should check the version of your backend. It works fine on 2.5.4 |
What works? Mouse backend doesn't have version 2.5.4 https://github.com/zyzo/react-dnd-mouse-backend/releases and the html5 backend doesn't work on Windows 10 - Chrome 77 as mentioned in the original post. |
yes, we did some adaptation of the workaround to html5-backend 2.2.7 and it worked well enough to put into production. |
Chromium's bug acknowledged that Linux has the same, and it will be fixed with the Windows version. Latest state is M78 has it in the beta coming out in a few days, M79 and Canary have it already. They're still discussing patching M77. |
这个问题现在仍然存在，我怎么样使用才能够解决呢，急急急！ |
我也希望能够尽快解决这个问题，chrome版本77出现这个问题 |
怎么解决的，麻烦回复一下，谢谢 |
请问这个问题解决了吗？ |
|
The original Chrome bug fix has been merged to the upcoming M77 patch release. I can not say when it will actually come out, just that I've been following the chromium bug page on this closely. |
|
The bug was in Chrome and fixed in Chrome version: 77.0.3865.120 |
|
Chrome 78 is out! I can confirm that the problem disappears in Chrome 78 :-) |
你用中文提问是没人回答你的 |
|
I recently encountered this error while working on my project. Upon investigation, I discovered that another component on the page was causing the drop event to fire unexpectedly. The issue arose because I was using both "react-dropzone" and "react-dnd" on the same page. Whenever I attempted to drop a file onto a dropzone, the error occurred. It seemed that the drop event triggered by react-dropzone was propagating and being captured by "react-dnd". To resolve this issue, I had to make a modification when calling the useDropzone hook from "react-dropzone". Specifically, I set noDragEventsBubbling to true: useDropzone({
noDragEventsBubbling: true,
...props,
})This adjustment ensured that the drag events were handled appropriately, resolving the error. |
Update 2019-10-14
The bug was in Chrome and fixed in Chrome version: 77.0.3865.120
We are using react-dnd in an web application which is hosted inside another webapplication using a cross-origin iframe.
We have noticed that since the last Chrome upgrade all the drag-drop functionality stopped working. Our app is working fine in older Chrome versions and in other browsers.
We are not sure whether this is hitting an edge case in this library or the issue is with in Chrome 77.0
Reproduction
Go to http://react-dnd.github.io/react-dnd/examples/dustbin/single-target (or to any of the examples)
Steps to reproduce the behavior:
The "inline" example is working fine:
However running the same code in the JavaScript/TypeScript tabs, so in a cross-origin iframe (e.g. in the embedded codesandbox) the drop event is not fired:
Running the example is also not working in the CodeSandBox editor which also uses an inframe.
In both cases there is this error in the console:
Expected behavior
No exceptions in the console, drop event is fired
Desktop (please complete the following information):
Additional context
We did some investigation and we've observed that Chrome fires the dragEnd event prematurely in the case of the iframe which breaks the invariant checks.
The text was updated successfully, but these errors were encountered: