In Chrome target monitor.getItem() returns null in drop handler about react-dnd-html5-backend HOT 24 OPEN

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.

from react-dnd-html5-backend.

@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.

¯_(ツ)_/¯

from react-dnd-html5-backend.

really.. but unfortunately it not does for me

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

@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?

from react-dnd-html5-backend.

@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!

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

@Mordra Do you have errors in console?

from react-dnd-html5-backend.

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.

from react-dnd-html5-backend.

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.

from react-dnd-html5-backend.

Can you please screenshot the error message in console?

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

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

from react-dnd-html5-backend.

+1

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

from react-dnd-html5-backend.

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.

from react-dnd-html5-backend.

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.

from react-dnd-html5-backend.

@shriah you saved my time thanks 👍

from react-dnd-html5-backend.

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

Ironic that using debugger causes the bug.

from react-dnd-html5-backend.

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?

from react-dnd-html5-backend.