Uncaught TypeError: Cannot read property 'drop' of undefined

Describe the bug When you have two closely positioned (but not nested ones) drop targets it’s quite easy to perform attempt to drop item on two targets simultaneously, then you’ll encounter the following error: Uncaught TypeError: Cannot read property 'drop' of undefined

To Reproduce Steps to reproduce the behavior:

1. Create two drop targets close to each other
2. Create drag source
3. Start dragging source item
4. Position item over both drop targets
5. Try to drop item
6. Observe error in browser console, DND becomes unresponsive

Expected behavior No error, item is either not dropping into any of targets or selects one of the targets in any sane manner.

Screenshots

Desktop (please complete the following information):

• OS: MacOS X Mojave
• Browser: Chrome
• Version: 70

Additional context Looks like error is related to this particular place in code - at some place in time target becomes undefined (although this behavior as far as I can understand contradicts getTarget method interface).

Error stack trace :

Uncaught TypeError: Cannot read property 'drop' of undefined
    at eval (dragDrop.js?a71d:125)
    at Array.forEach (<anonymous>)
    at DragDropManagerImpl.drop (dragDrop.js?a71d:123)
    at Object.eval [as drop] (DragDropManagerImpl.js?0b72:40)
    at TouchBackend.handleTopMoveEndCapture (Touch.js?1b46:555)

Error on any DND attempt after first crash:

Uncaught Error: Cannot call hover after drop.
    at invariant (browser.js?40b6:38)
    at DragDropManagerImpl.hover (dragDrop.js?a71d:79)
    at Object.eval [as hover] (DragDropManagerImpl.js?0b72:40)
    at TouchBackend.handleTopMove (Touch.js?1b46:532)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kimianikazm]

@Koka I hope you have solved this issue. If so please share your solution.

In my case the root cause was changing elements. In case of overlapping targets the drop is called for each target. I was capturing drop on top target and ignoring drop on other targets.

This was ok.

Then my code started changing other component when drop received on top target. This created new reference for other targets which was different than what previously had with DrapDropManager. So I was getting this error.

As of now I have fixed this error by using setTimeout() for my changes. I just delayed dispatching action and let ReactDnD complete the looping through targets.

I am trying to drop an element and replace an already existing element in the dropzone. I Noticed that determineDropResult() in drop.js runs twice, and the second time around the target is undefined. Hence the error: Cannot read property ‘drop’ of undefined

Do you mind explaining where exactly you added the delay?