adobe / adobe/react-spectrum

useLongPress onLongPressEnd fires while still pressed

Open
#7,044 4 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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

image

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_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in the useLongPress documentation example with the Activate button, then trace the useLongPress and onPress entry points mentioned in the report. Confirm the event sequence in Chrome or Safari and identify why onLongPressEnd occurs before press end; done means the event fires only after mouse up or press end.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.