Uncaught Invariant Violation: Cannot call hover while not dragging. error in Chrome 77.0 when using iframes

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:

browser.js:38 Uncaught Invariant Violation: Cannot call hover while not dragging.
    at invariant (https://hmq56.csb.app/node_modules/invariant/browser.js:38:15)
    at checkInvariants (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.js:45:29)
    at DragDropManagerImpl.hover (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.js:25:5)
    at Object.eval [as hover] (https://hmq56.csb.app/node_modules/dnd-core/dist/esm/DragDropManagerImpl.js:132:38)
    at HTML5Backend.handleTopDrop (https://hmq56.csb.app/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js:418:21)

Expected behavior No exceptions in the console, drop event is fired

Desktop (please complete the following information):

• OS: Windows 10 (1903)
• Browser Chrome
• Version 77.0.3865.75 (Official Build) (64-bit)

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.

[jkells]

Here we go, I think this is the issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1005747

[timmfin]

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 setTimeout delay of the handleTopDragEndCapture event works 95%+ of the time. Because we have seen an occasional failure where the Invariant Violation error still happens, likely because the delay wasn’t long enough. However, this at least has improved the situation for us, and we can look at a more robust hack if/when needed.