How to prevent drag events to be triggered when an element is put above #606

Unanswered

QuentinGab asked this question in Q&A

QuentinGab
Jun 12, 2023

Hi,
First of all, this package is awesome!

Stack:

React: v18
"@use-gesture/react": v10

I'm kind of stuck with a situation where I can't understand how events are triggered and how to prevent them to be triggered.

I have 2 components:

A Calendar that can be dragged & swipped and take the fullscreen.
A Dialog that can be open and put above the Calendar with position: fixed. This component is a portal, so the node is not a child of the Calendar component. (However the react Component is called inside the Calendar)

However dragging and clicking inside the Dialog still trigger the drag event on the Calendar, even if the DOM looks like that:

<body>
  <Calendar />
  <Dialog />
</body>

The following video show the problem:

Enregistrement.de.l.ecran.2023-06-12.a.19.04.10.mov

The only solution I can think of now, is checking if currentTarget contains target on the event with useDrag.

Maybe I'm missing something in the doc/config/event management but I've tested many option with no success

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment