pmndrs / use-gesture

👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
https://use-gesture.netlify.app
MIT License
9.06k stars 309 forks source link

Pointer touch set to true is no longer calling drag handler #392

Closed jzombie closed 3 years ago

jzombie commented 3 years ago

Describe the bug pointer.touch: true no longer working on mobile

Sandbox or Video https://codesandbox.io/s/dawn-wood-ovi8f?file=/src/App.js Test link: https://ovi8f.csb.app/

In the test, if you touch the top box on mobile, it won't execute the drag handler. The bottom box proceeds just fine. I've ensured touch-action is set to none on the draggable element, as shown in the code sandbox.

demo

Information: Tested on various versions of iOS simulator and Android

Checklist:

jzombie commented 3 years ago

This was originally working in my codebase, and stopped working after rebuilding package-lock.json from scratch. Updated to latest @user-gesture/react and still experiencing issue.

awmleer commented 3 years ago

Seems like it is related to these lines: https://github.com/pmndrs/use-gesture/blob/ec3b80a398d9e240d8ed91faf99fd1790c1ef4e8/packages/core/src/engines/DragEngine.ts#L78-L89

I encountered the same issue and after I manually set pointer.buttons to -1, it works.

dbismut commented 3 years ago

Sorry about this, I'll release a fix today.

awmleer commented 3 years ago

@dbismut I've submitted a pull request. I tested on my project and it looks ok. Please take a look at it. Thanks a lot! This bug is due to the operation priority.

jzombie commented 3 years ago

Hi @awmleer thanks for the patch.

I revisited what I was working with, in another project, and was able to get it to work with the pointer events correctly (was previously experiencing inconsistencies across devices), but if I wind up in the dilemma I was in before, I'll keep this in mind.