Buttons cannot be used as custom drag handles

[landon-at-faro]

Expected behavior

Using <button {...draggableProvided.dragHandleProps}></button> as a drag handle will work

Actual behavior

Using buttons as drag handles does not work. Using divs however, does.

Steps to reproduce

1. Click on the drag handle and start dragging

Suggested solution?

none

What version of React are you using?

17.0.2

What version of react-beautiful-dnd are you running?

13.0.0

What browser are you using?

Chrome Version 92.0.4515.131 (Official Build) (x86_64)

Demo

Codepen with button drag handles Same codepen but with div drag handles

[spielzeugland]

Hi @landon-at-faro, from looking at the code this is by intention. Dragging of interactive elements is prevented. You can check see button tag being listed an interactive element at https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/use-sensor-marshal/is-event-in-interactive-element.js#L10 and the corresponding check in https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/use-sensor-marshal/use-sensor-marshal.js#L182. I assume this is because the dragging is implemented using mouse events like mousedown or mouseup.

[landon-at-faro]

s by intention. Dragging of interactive elem

Thanks for the reply @spielzeugland : j Unfortunately, this prevents me from using my company's button component as the drag handle. It would be nice if this artificial limitation could be opted out of for this reason.