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.

¯_(ツ)_/¯

[subash1]

really.. but unfortunately it not does for me

[jamieholliday]

I can confirm I have the same issue in chrome 49.0.2623.87 console.log(monitor.getItem()); logs the correct item but adding a breakpoint at the same point in the file monitor.getItem() is null

[harjis]

I had the same problem. To me it seemed that END_DRAG was somehow executed before DROP. When I commented out this line: https://github.com/gaearon/dnd-core/blob/master/src/reducers/dragOperation.js#L50 it seemed to fix the problem. After that I removed the whole node_modules content (since I had console logs in other places too) and installed everything again and for some reason this seemed to fix the issue as well. Weird 😕

I have Chrome Version 50.0.2661.102 (64-bit) on OSX

[m4recek]

Same on Chrome version 51.0.2704.84m, Windows 7 64bit using [email protected]

[loki951753]

+1

Version 51.0.2704.63 (64-bit) Ubuntu14.04 [email protected]

[gtp]

just had the same situation, seems like possibly the second time you access monitor.getItem() it returns null, so a console.log before it can cause the problem. I removed all lines before the call to getItem and that fixed it for me.

[shriah]

I think this is because the drag actions does not get paused by chrome once the debug point is hit. Once you release the dragged item the state is set with a null dragged item, because no item is being dragged.

[sunnipaul]

Thank you for this wonderful react-dnd.

I am having the same issue on google chrome 51.0.2704.103 m, windows 10. "react-dnd": "2.1.4", "react-dnd-html5-backend": "2.1.2"

I log it here:

@DropTarget([ItemTypes.OPP_LIST, ItemTypes.ITEM], dropTarget, (connect, monitor)=>{
    let item = monitor.getItem();
    console.log(item );
    return {
       isDragging: !!item
   }
}

It will log about 10 lines of the correct item, then multiple lines of null, when dragging However, it works fine in Firefox 46.0.1 Finally, I figured it out, it's because I have a Dustbin at the beginning of the draggable items who will show up when I am dragging one item. If I remove the Dustbin or put it at the end of the list, it works fine. It seems the show up of the Dustbin is doing bad on the underlining mechanism and Firefox can skip it.

[kevalbhatt]

@shriah you saved my time thanks :+1:

[dandonahoe]

@shriah Weirdest bug I've ever seen. THANK YOU.

Ironic that using debugger causes the bug.

[witbybit]

I encountered the same issue. When I debug using Chrome, I get null for monitor.getItem(). Any idea if Chrome team is aware of this issue?