What would be the best approach to make buttons or other interactive elements available on selectable elements

[Arjanno]

Environments

• Framework name: react
• Framework version: react 18.2.0
• Component name: selecto
• Component version: 1.18.2
• Testable Address(optional):

Description

I have draggable elements that also contain buttons. Currently Selecto intercepts all mouse-clicks. Is there a way to have a higher zIndex or something like the checkinput hack to solve that the buttons have higher priority as Selecto?

[daybrush]

@Arjanno

It is not blocking the click, but blocking the drag.

In the dragStart event, if the target is a button, call stop().

onDragStart={e => {
   if (e.inputEvent.target.tagName === "BUTTON") {
      e.stop();
   }
}}

[Arjanno]

Awesome! That solved my problem.