"use-long-press" successfully triggers even with movement, but then does not finish when released #41

derekantrican · 2023-12-07T21:47:04Z

derekantrican
Dec 7, 2023

I'm trying to build a small app that will change content as long as the finger is held down but will immediately change back when released. Here's the options I'm using:

const bind = useLongPress(() => {
  console.log('long pressed');
  setTemporarySubs();
}, {
  threshold: 3000,
  cancelOutsideElement: false,
  cancelOnMovement: 1000,
  onFinish: () => {
    console.log('finished');
    setDefaultSubs();
  }
});

This works pretty well, but the only case where I'm having issues is if the long press moves around it successfully triggers, but then releasing the long press does not trigger the "onFinish":

In the screen recording below, you can see that the "long pressed" message appears and the content changes. But when I release the tap (around the time the scrolling stops) the "finished" message does not appear until I click on the webpage again.

If I keep the tap in the same location without moving it, it works exactly how I would expect.

What setting do I need to change to get this behavior?

minwork · 2023-12-08T11:59:03Z

minwork
Dec 8, 2023
Maintainer

Hey, when you set cancelOutsideElement to false cancel event (which triggers onFinish callback) will be detected by both element and window listener but it seems that window listener didn't catch that event.

There may a be a few reasons for that:

Google chrome mobile device emulator tends to call multiple different events to emulate touch which may trigger strange behaviour. Have you tried if that flow is working when using mouse only or on actual mobile device?
Is there any element that could suppress bubbling up mouseup, touchend or pointerup events to window?
Try out [email protected] where I've changed how events are recognised as valid, to check if that affects this situation in any way.

1 reply

derekantrican Dec 8, 2023
Author

Thanks for the reply.

I have tested this on a mobile device - same results
I don't think so - I'm putting this on one of the "most root" elements (I think it is a <div> under <body>). In my testing I'm also trying to avoid tapping on other parts of the app that would trigger an event (eg a hyperlink or onClick event)
I'll try that out when I get a chance

derekantrican · 2023-12-10T00:06:39Z

derekantrican
Dec 10, 2023
Author

Closing as I've decided this approach isn't going to work for me (even if I get the long press to work the way I want)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"use-long-press" successfully triggers even with movement, but then does not finish when released #41

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

"use-long-press" successfully triggers even with movement, but then does not finish when released #41

derekantrican Dec 7, 2023

Replies: 2 comments · 1 reply

minwork Dec 8, 2023 Maintainer

derekantrican Dec 8, 2023 Author

derekantrican Dec 10, 2023 Author

derekantrican
Dec 7, 2023

Replies: 2 comments 1 reply

minwork
Dec 8, 2023
Maintainer

derekantrican Dec 8, 2023
Author

derekantrican
Dec 10, 2023
Author