In Chrome target monitor.getItem() returns null in drop handler

[yamelkaya]

According to the docs when we call monitor.getItem() from target drop handler it must return the object we passed in draggable source beginDrag(). I've tested it on expamples from website in different browsers (Chrome, IE and Edge):

1. stress test: http://gaearon.github.io/react-dnd/examples-dustbin-stress-test.html
2. single dustbin: http://gaearon.github.io/react-dnd/examples-dustbin-single-target.html

and I found that everything works fine IE and Edge but does not work in Chrome (Version 46.0.2490.80 m) - getItem returns null in drop handler althogh it returns required object in canDrop and hover both. Here is an exception that I receive:

Uncaught Error: Invariant Violation: Cannot call endDrag while not dragging.
invariant @ browser.js?9520:42 endDrag @ dragDrop.js?8117:170 (anonymous function) @ DragDropManager.js?26ce:74 endDragIfSourceWasRemovedFromDOM @ HTML5Backend.js?0327:230 handleTopDrop @ HTML5Backend.js?0327:527

[gaearon]

I can't reproduce this in Chrome 47 on OS X.
Do you have the issue on Chrome 47 on Windows?

[jasonslyvia]

I can reproduce this in Chrome 47 on OS X, while Firefox 42 on OS X works fine.

Please try this demo https://github.com/jasonslyvia/bi-demo

[gaearon]

@jasonslyvia Do you get the crash or is it just item being null? Are you running 2.0.2?

[gaearon]

@jasonslyvia In your example you have "react-dnd-html5-backend": "^2.0.0",. Any chance it installed 2.0.0 instead of 2.0.2?

[jasonslyvia]

@gaearon

When in 2.0.0, I get null for drop(props, monitor, component) when I call monitor.getItem().

In node_modules/ it did installed version 2.0.0 for react-dnd-html5-backend, and switched to 2.0.2 everything works. Thanks a lot!

[mordrax]

I'm getting this same issue with the following setup:

Ubuntu 14.04
Chrome Stable 48.0.2564.116 (64-bit)
"react-dnd-html5-backend": "^2.1.2"

Works with Firefox: 43.0

[gaearon]

@Mordra Do you have errors in console?

[mordrax]

No errors, it just returns null when I break at the line:
let source = monitor.getItem();

Then I played around with installing chrome unstable via shell and even though the version still shows 48.0.2564.116, it then just started working again... (i.e source had the expected object from beginDrag)

So I don't know what's going on, really frustrating and it wasn't the first time that I encountered this. Last time took me on a wild goose chase as well but at least now I know it's browser issues.

[shem86]

I had the same issue on chrome on win7
"react-dnd-html5-backend": "^2.1.2"

latest chrome updates (48.0.2564.116 m, 49.0.2623.75 m)
seems to have fixed it.

[gaearon]

Can you please screenshot the error message in console?

[shem86]

No errors, it just returns null when I break at the line:
let source = monitor.getItem();

[subash1]

hooray.. here is the same..
in windows, in Firefox 37.0.2 is working.
but in chrome 49.0.2 does not..

[spncrlkt]

@shem86 I had the same issue. If I broke at the line and tried monitor.getItem(), it returned null.

However, if I console.log(monitor.getItem()); it logs the expected item value.

¯_(ツ)_/¯