React beautiful dnd with html video not bubbling events

Question

I am using react beautiful dnd for draging images and videos in a horizontal list. The images/videos are wrapped with a div (position set to relative). It works well for images, but for videos it doesn't work. It seems that the html video element doesn't propagate the click, drag events to the parent div, but is instead used to play/pause the video. How can I bypass this issue? I don't really need the video controls? Thanks in advance

Answer 1

This is not working by design - Beautiful DND turns off the dragging functionality on this element (and some more) so the native experience won't break, as stated in the docs.

You can, however, opt out of this behaviour by adding the disableInteractiveElementBlocking prop to a <Draggable />.

Needless to say, it might harm the UX, so you might want to disable the controls while dragging, and make sure you're communicating to the user that these controls are now draggable and can't be interacted otherwise (e.g. - iOS apps wobbling when in reorder mode).