Provide a general summary of the issue here

When scrolling on touch devices on a page with a <NumberField> including increment and decrement buttons, it's very easy to accidentally trigger a change without noticing.

🤔 Expected Behavior?

A scrolling gesture should not trigger any actions as that is pretty unexpected and not default behavior on touch devices. Starting a scroll on the increment/decrement buttons should not do anything.

😯 Current Behavior

Starting the scroll on the increment/decrement buttons will trigger a change.

💁 Possible Solution

The default behavior should probably be to trigger change on click / pointerup / touchend instead of pointerdown / touchstart for touch devices or prevent the change action if the page is being scrolled.

🔦 Context

We are using the NumberField in multiple booking systems with almost all users on mobile devices. We are getting frequent user complaints that they are creating bookings with incorrect quantities.

After checking analytics and logs, we can see that they have indeed triggered the change via the buttons without noticing it.

The problem is probably much more common for us than what we get reports of, as we only hear from the user's that did not notice the incorrect quantity on confirmation pages. Those who notice can edit to the correct quantity before proceeding, thus never contacting support.

🖥️ Steps to Reproduce

This can be reproduced by scrolling on the increment/decrement buttons on the NumberField documentation page: https://react-spectrum.adobe.com/react-aria/NumberField.html

Increasing the button sizes and placing them on the right side to make it easier to click will also inadvertently make this issue pop up very often.

Version

1.10.1

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

MacOS, iOS, Android

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response