useDrag breaks onClick listener in React portal to shadow dom

[derenge]

Describe the bug Binding a drag gesture listener on the parent of a shadow dom host prevents onClick listener within shadow dom from firing.

This does work with firefox, but not the Chrome version listed below.

Sandbox or Video https://codesandbox.io/s/red-cdn-t8hkjm?file=/src/App.js

Information:

• Use Gesture version: ^10.2.27
• Device: Laptop
• OS: Pop!_OS 22.04 LTS
• Browser: Chrome Version 117.0.5938.88

Checklist:

• [x] I've read the documentation.
• [x] If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

[derenge]

I found that this is related to the pointer.capture option. If capturing is disabled, then the shadowed dom button click is triggered. I updated the sandbox with this case.

I'm not sure if this is intentional since it only happens with the shadow dom

[dbismut]

Hm use-gesture doesn't do any magic, it just tries to assign listeners to elements. It's possible that setPointerCapture which is used when pointer.capture is set doesn't work with shadowed elements I'll dig into this deeper when I have time, but I'm not sure the lib can do anything about it.