useLongPress onLongPressEnd fires while still pressed

[deloreyj]

Provide a general summary of the issue here

The onLongPressEnd event fires almost immediately after the onLongPressStart event. You can experience the issue in the current version of the documentation: https://react-spectrum.adobe.com/react-aria/useLongPress.html

🤔 Expected Behavior?

onLongPressEnd should not fire until mouse up or press end

😯 Current Behavior

When clicking and holding on the Activate button at the bottom of the page, all 3 longPress events fire

https://react-spectrum.adobe.com/react-aria/useLongPress.html

💁 Possible Solution

It looks like onLongPress passes through to onPress, so I'm assuming the lower-level handler is firing early.

🔦 Context

I'm using a long press handler in a video player that pauses the video on long press and resumes the video on long press end. Currently the video will pause momentarily and then resume playing.

🖥️ Steps to Reproduce

Reproducible in the docs: https://react-spectrum.adobe.com/react-aria/useLongPress.html

Press and hold on the Activate button and it will log all 3 events

Version

"react-aria": "^3.34.3"

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

Arc

What operating system are you using?

Mac OS

🧢 Your Company/Team

3rd party

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue, this is working as intended.

useLongPress handles long press interactions across both mouse and touch devices. A long press is triggered when a user presses and holds their pointer over a target for a minimum period of time

You just want onPressStart and onPressEnd from usePress, you don't need useLongPress

[deloreyj]

@snowystinger
The experience I'm looking to build is like Instagram Reels:

1. On Press, mute/unmute the video
2. On long press, pause the video
3. When the user releases the long press, unpause the video

Note that when long pressing the button, only a long press is emitted, and no normal press is emitted on pointer up.

If onLongPressEnd fires before the user releases the press and no normal press events are emitted on pointer up, how can I know when the user releases the long press?

[snowystinger]

Thanks for explaining. I'd have thought you could do something like this https://codesandbox.io/p/sandbox/n4gtyw, however, it appears that the usePress is fired as well. We'll need to look into it.

Edit: because of this line looks like

react-spectrum/packages/@react-aria/interactions/src/useLongPress.ts

Line 82 in c904e06

// Prevent other usePress handlers from also handling this event.

We'll need to be careful if we decide to change this, it could be considered a breaking change.
It may be easier to build your own useLongPress hook to handle this, using usePress like we do behind the scenes

[deloreyj]

Gotcha thanks for the response. That's probably the route that I'll go for now.