onLongPress : movement during press

[mtournay]

Hi

I'm using useLongpress hook, and it's working fine, but when users scrolls, i do not want the event to be fired, or i would have the ability to detect move in the event parameter.

Do you think it's possible ? Am I missing something already existing ?

Regards.

[danvoyce]

+1

[mikefogg]

For anyone looking for this still, a solution that seems to be working great for me is to simply track the current scroll position at start use it to compare with the current scroll position when the callback is fired.

Something like:

const startScrollLocation = useRef()
const attrs = useLongPress(
    () => {
      const movement = Math.abs(startScrollLocation.current - scrollContainerRef.current?.scrollTop)
      if (movement > 20) return
      
      fireTheCallback()
    },
    {
      onStart: () => (startScrollLocation.current = scrollContainerRef.current?.scrollTop),
      onFinish: () => (startScrollLocation.current = null),
      threshold: 350,
    }
  )

[tilenmiklavic]

This pull request might help.
#321

[wchargin]

It's not just scrolling, though. A proper long press shouldn't be triggered when the finger (or mouse) has moved off the target. The classic example is holding down a button but then dragging off the button to cancel the mouse before releasing the mouse button.

You can see this on the https://usehooks.com/uselongpress page on mobile, by touching the element then moving to the side. This doesn't scroll the page at all, but it still shouldn't trigger a long press. (Compare with a long press on a native element, like a link.)

Demo:

longpress-after-move-off.mov

[iNikAnn]

Use this hook instead: use-long-press

const bind = useLongPress(handleLongPress, { 
	cancelOnMovement: 10 
});