Combining filterTaps and preventScroll options on useDrag is breaking the onclick event on elements inside the drag container

[gwildu]

Describe the bug

When using the useDrag Hook with both the filterTaps and preventScroll options enabled, taps on child elements of the drag container are not resulting in an onclick event on that child element. The issue does not occur when only one of these options is enabled, or when using a desktop browser or triggering the tap from the Chrome Remote Debugging Tools (only on real mobile devices).

The following options do not work together:

useDrag({
  filterTaps: true,
  preventScroll: true,
  // other options...
})

However, the hook works as expected with either one option enabled:

useDrag({
  filterTaps: true,
  // other options...
})

// or

useDrag({
  preventScroll: true,
  // other options...
})

Sandbox or Video

To reproduce the issue, please refer to this codesandbox example. Note that the issue only occurs on a real mobile device. In the case where everything works, when you tap the link, an alert should be triggered. With the current options in the sandbox this is not the case. If you remove either one of the options filterTap or preventScroll the alert is triggered.

Information:

• Use Gesture version: v10.2.24
• Device: Android Nokia 7.2 and iPhone XR
• OS: at least Android 11 and iOS 16.3.1
• Browser: Chrome and Safari

While debugging the code, I noticed a difference between the cases where the issue occurs and when it doesn't. I have attached a screenshot. This one was taken in a case when it worked (detail is 0) in the case where it was not working, the detail was 1, which resulted in the condition to be true and preventDefault was executed. I don't exactly understand, what detail is, but I thought it could be helpful.

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.

Please let me know if there is any additional information I can provide to help resolve this issue.

[xuqianjin]

same issue

[dbismut]

I'll try to have a look asap.

[gwildu]

@dbismut It's been a while and I was wondering if I could be of assistance in resolving the issue. Currently I'm not deep enough in the code to understand exactly what goes wrong or how to fix it, but if you could provide a hint or suggest a solution, I'd be happy to try my best to create a PR. What do you think?

[dbismut]

Hey @gwildu, really sorry this is still under my radar but I'm overwhelmed with work atm. Next week should be calmer. Don't hesitate to add me on discord.

[365kim]

Any updates...? 🥺

[dbismut]

Sorry @gwildu I meant to answer way back then, I created this sandbox at the time. https://codesandbox.io/s/593-vfqsx0?file=/src/App.tsx

Let me know if this is what you're trying to achieve or if I'm missing something.

[yongdamsh]

@dbismut If you run the sandbox in a mobile environment, there is no response even if you click the link. Can you please confirm this part?

https://github.com/pmndrs/use-gesture/assets/4126644/04752502-1c2e-4f17-b1f7-be98f2ffb90c

[terrymun]

This is still an issue: and the current stop-gap solution we have is to simply avoid using filterTaps and preventScroll options at the same time.

[sepehrooo]

I also have the same issue. But if I don't use filterTaps, then the taps won't get filtered and when I tap the element it triggers a drag. And if I don't use preventScroll, then scrolling will be misinterpreted by dragging. I'll post a reproducible sandbox soon.

[Xexr]

Facing the same issue on mobile and I can't figure out a way around it presently.

Any chance of this one being resolved?

One extra bit of context though. It's not true that the taps are disabled entirely, rather that they have a timer applied of the same length as preventScroll (which is 250ms if you just set it to true). So if you tap and hold for > 250ms, the taps will trigger. This doesn't really help though, as no user will do that intuitively, but hopefully it at least sheds light on the root cause.