useDrag with input type number has obscure issues

[stokesman]

Describe the bug
In macOS/Safari >= 13, if a number input has the useDrag handlers attached a single click on the input spinner buttons makes any cursor movement over the arrows trigger what appears to be the UA provided increment/decrement mechanism. After that there seems to be no way to have it cease whether the input is focused or not.

This originates from: WordPress/gutenberg#32497. From what I can tell this could end up being a Safari bug, though I was unable to reproduce it with addEventListener and noop handlers for the same events pointer(up|down|move|cancel).

Sandbox
https://codesandbox.io/s/draggable-number-dvqi6?file=/src/index.js

Video

use-drag-number-input-safari14.mp4

Additional Related Issue/Video
In Chromium 90, I found that sometimes a drag does not stop when it ends outside of the input. It seems to be only when there is a text selection active simultaneously so it's not always easy to trigger. The response to cursor movement outside the input does end, but it continues to respond to cursor movement inside the input and the dragging state is still true.

use-drag-number-input-chromium90.mp4

Information:

• React Use Gesture version: v9 and v10-beta
• Device: macbook
• OS: macOS 10.12
• Browser: Safari 13 and 14

Checklist:

• I've read the documentation.
• If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

[dbismut]

@stokesman sorry for the late answer. I think it's indeed a Safari bug, but you can get away with it by not using capture, and add the following option to your handler config:

useDrag(() => {}, { pointer: { capture: false } })

Your forked sandbox: https://codesandbox.io/s/draggable-number-forked-bhk11?file=/src/index.js

Pretty sure that solves the Chrome issue. Let me know how it goes!

[stokesman]

Thanks so much @dbismut! I can't reproduce either issue with pointer: { capture: false }. Great to see such a simple solution.

It's curious to me because the handlers from bind() don't look like capturing ones (onPointerDown as opposed to onPointerDownCapture). I guess there are some other window/document listeners added that the capture option applies to.

[dbismut]

onPointerDownCapture and setPointerCapture are two different things ;)

[stokesman]

Ah, looks like I was confusing this with eventOptions 🤦 . Thanks again!