Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useDrag breaks onClick listener in React portal to shadow dom #630

Open
2 tasks done
Derenge opened this issue Sep 19, 2023 · 2 comments
Open
2 tasks done

useDrag breaks onClick listener in React portal to shadow dom #630

Derenge opened this issue Sep 19, 2023 · 2 comments
Assignees

Comments

@Derenge
Copy link

Derenge commented Sep 19, 2023

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:

  • I've read the documentation.
  • If this is an issue with drag, I've tried setting touch-action: none to the draggable element.
@Derenge
Copy link
Author

Derenge commented Sep 19, 2023

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
Copy link
Collaborator

dbismut commented Sep 26, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants