Combining filterTaps and preventScroll options on useDrag is breaking the onclick event on elements inside the drag container
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:
- I've read the documentation.
- If this is an issue with drag, I've tried setting
touch-action: noneto the draggable element.
Please let me know if there is any additional information I can provide to help resolve this issue.
Source: pmndrs/use-gesture