use-gesture: `useDrag` can get stuck in "down" state

It seems possible to get stuck in a state where down is always true, this seems to happen (sometimes) under certain conditions:

mouse button (trackpad) is currently down
window is resized while dragging (e.g. via keyboard shortcut)
mousebutton is clicked/released outside the window

Edit: Doesn’t even need resize, just releasing the mouse while outside the drag element seems to be enough: https://github.com/pmndrs/use-gesture/issues/376#issuecomment-955688757

This may seem somewhat of an edge case, but I keep accidentally hitting this while developing and it’s very annoying. It doesn’t happen every time, I had to do a few takes to capture the problem. It might be timing related. I think I’ve seen it also happen without a resize, just by releasing the mouse while not over the window, but I may be mistaken, I couldn’t reproduce for the screencap. I just know this kept happening to me every few minutes while I was developing, and I don’t believe I was resizing windows while the mouse is down that frequently.

The underlying issue seems to be that the code assumes a pointerup event will always be fired when the mouse button is released, but there’s at least one circumstance (described above) where this assumption doesn’t hold.

https://github.com/pmndrs/use-gesture/blob/5b9715c869c2945c8d34178453fcfad11ecc48d9/packages/core/src/engines/Engine.ts#L211-L214

https://github.com/pmndrs/use-gesture/blob/5b9715c869c2945c8d34178453fcfad11ecc48d9/packages/core/src/Controller.ts#L40-L51

Sandbox or Video

https://user-images.githubusercontent.com/43438/139291136-4c1657d9-12e6-4ae0-b55e-a5aabbc90827.mp4

https://codesandbox.io/s/amazing-poincare-6bv0l?file=/src/index.tsx

Information:

React Use Gesture version: 10.1.1
Device: Macbook Pro 2019
OS: MacOS 12.0.1
Browser: Chrome 95.0.4638.54

Checklist:

I’ve read the documentation.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 25 (4 by maintainers)

Most upvoted comments

@dbismut maybe worth reopening this issue?

timoxley on Jan 3, 2022

I did a small research of my case. I have a bunch of draggable elements on the page, specifically there is a container, that has useDrag handler and elements in the container also using useDrag.

Anyway when I move elements, sometimes they loose pointer capture. So I receive lostpointercapture in element drag handler and pointerUp after that goes to my container drag handler.

I do not know why my elements loose pointer capture, but this is the reason of my problems.

Example - https://codesandbox.io/s/divine-frost-3qvtc?file=/src/App.js

https://user-images.githubusercontent.com/3299889/149669049-32801f24-86d1-47af-b4ae-42cf19385005.mov

megabuz on Jan 16, 2022

No, I can easily reproduce this issue in the latest version @use-gesture/core @10.2.4 @dbismut when I drag fast outside the chrome tab (using intel macbook pro 16’').

Can you re-open this ticket please 🙏

alexandre-sarfati on Dec 25, 2021

This issue still happens today. There is a workaround by passing a config option to set pointer capture to false and forcing it to use mouse events instead:

useDrag(..., { pointer: { capture: false } })

Hope that helps 😃

ghost on Jul 25, 2023

Did anyone find a workaround for this? still seems to be an issue in version 10.2.27. Very easy to reproduce on an M1 MacBook Air trackpad (Chrome 115), just on the first example on the docs page. Seems to work fine on my windows desktop though (also Chrome 115).

samcarton on Jul 19, 2023

I see the same issue on chrome with MacBook trackpad. It does not reproduce constantly, but when it does pointerup event is not caught and it can be logged in an outer element.

megabuz on Jan 2, 2022

If this can help, I can only reproduce the issue (which occurs for a lot of users apparently because it’s a chrome bug), using the macbook trackpad. I have an additionnal logitech mouse and I can not reproduce the issue with the mouse.

alexandre-sarfati on Dec 26, 2021

Let me know if this happens to be fixed in 10.2.1!

dbismut on Dec 6, 2021

@dbismut What OS/Browser are you on? Can you try again with CPU throttling enabled in DevTools?

With CPU throttling enabled I’m able to get it to happen almost every time using the first demo on https://use-gesture.netlify.app/docs/state/

No screen recording, no cmd-tabbing, no resizing windows. Just fast movement.

I’m in Chrome 95 on Mac. Couldn’t repro on the docs page in Safari or Firefox, but also didn’t see a way to CPU throttle them via devtools. Tried running the screencap software and also running devtools profiling to try slow things down but it didn’t seem to work. It’s possible the bug is something Chrome. The actual app where I noticed this issue is on react-three/fiber, so it’s possible the issue is caused by performance drop due to pushing webgl too hard.

timoxley on Oct 31, 2021