Preventing propagation with nested menus involving draggable elements...

[ajhenri]

Hello vkbansal!

Before explaining this, I just want to say thank you for building this awesome project! It has helped immensely with my current work. I was able to use this seamlessly with 'react-dnd'. I am not permitted to share the source of what I have been working on that helped me discover the following issue.

I have been working on a project (react v15.6.1) where I have draggable elements/boxes upon droppable grid cells where both the grid cells and the draggable elements have context menus attached. Everything worked perfectly, except for when I am using the holdToDisplay (this is happening both on mobile and desktop). For some reason, on desktop and mobile devices (like the iPad), whenever I click/touch & hold on one of the elements/boxes (on top of the grid cell), it will open up the menu of the grid cell instead of the menu of the nested element. In other words, the event propagates to the parent, which is what I don't want.

I understand that the nested menu example on your demo page is working. But in my case, using react-dnd and their html5/touch backends, it is not.

While I unfortunately do not have an example fiddle to show (since I don't have the time at the moment), I do have this pull request, adding 2 simple lines which I have confirmed (on both desktop and mobile) fixes my issue.

All tests passed. Let me know what you think...

Thanks,
AJ

[kinke]

Thanks, we had the same issue with an apparently very similar setup (also using react-dnd with html5 backend). The context menu still pops up while dragging an item (with context menu) though - at the item's original location - most of the time, unless dragging it away very quickly (way under the 1 second holdToDisplay).