useDrag with mouse only

[manelio]

I don't know if this is the expected behavior, but I need for my use case useDrag to work only with mouse and not with touch devices.

const bind = useDrag(
  state => console.log(state.event.type),
  {
    eventOptions: {
      passive: false, // this is a workaround so I can cancel the touch* events
    },
    pointer: {
      touch: false, // This is a default
      mouse: true,
    }
  }
)

With this code, touch* events are still being fired.

Can anyone shed some light on this?

[dbismut]

Did you read the documentation?

[manelio]

I never ask without having read the documentation several times or researching on my own. And I seldom end up asking. Maybe in this case, I am overlooking something.

[dbismut]

The doc doesn't say anything about disabling events for touch devices.

https://use-gesture.netlify.app/docs/options/#pointertouch

Most gestures, drag included, use pointer events. This works well in 99 situations in 100, but pointer events get canceled on touch devices when the user starts scrolling. Usually this is what you actually want, and the browser does it for you. But in some situations you may want the drag to persist while scrolling. In that case you'll need to indicate 🤙 @use-gesture to use touch events, which aren't canceled on scroll.

So it's not disabling anything it's just merely toggling between using PointerEvents and TouchEvents.

[dbismut]

There's the enabled option that you can toggle to your likings.

[manelio]

Thank you for your response.

So I will continue with my current approach.

Just out of curiosity: my use case is a dashboard that needs to be scrollable by dragging with the mouse, but allowing native scrolling on touch devices. The overflow is hidden by default, but overflow-x for pointer: coarse. That's why I wanted to ignore any events that were not mouse events.

BUT I had other scroll synchronization events that were affecting the correct functionality.

So thank you, and shame on me :).