react-dnd: 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: chrome-working

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:

chrome-not-working

Running the example is also not working in the CodeSandBox editor which also uses an inframe.

chrome-not-working-codesandbox

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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 19
Comments: 27

Most upvoted comments

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

jkells on Sep 23, 2019

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.

timmfin on Sep 13, 2019

The bug was in Chrome and fixed in Chrome version: 77.0.3865.120

nemesv on Oct 14, 2019

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

TheConfuZzledDude on Sep 25, 2019

adeelraza on Sep 14, 2019