Wheel scroll behavior for NumberField is inverted on Windows

[asyncore]

🐛 Bug Report

When a NumberField is active, scrolling down via the mouse wheel triggers the increment behavior, and scrolling up via the mouse wheel triggers the decrement behavior on Windows. On MacOS this could make sense as the scroll direction is inverted, but it's pretty counter-intuitive on Windows.

🤔 Expected Behavior

Scrolling up via the mouse wheel should increment the value, and scrolling down via the should decrement the value in the NumberField on Windows.

😯 Current Behavior

Scrolling up via the mouse wheel decrements the value, and scrolling down via the increments the value in the NumberField on Windows.

💁 Possible Solution

The behavior is defined in

react-spectrum/packages/@react-aria/numberfield/src/useNumberField.ts

Line 142 in 4a75768

if (e.deltaY > 0) {

.

Perhaps, based on the window.navigator.userAgent,
For Mac platforms, the current behavior could be kept (e.deltaY > 0 => increment())
and for the other platforms (e.deltaY < 0 => increment())

Alternatively, the behavior can be inverted based on a flag in the NumberField or NumberFieldState props, so the caller would be in control.

🔦 Context

As a Windows user, I'm used to things going down when I scroll down, and going up when I scroll up.

💻 Code Sample

🌍 Your Environment

Software	Version(s)
react-spectrum	3.17
Browser	Chrome
Operating System	Windows

🧢 Your Company/Team

🕷 Tracking Issue (optional)

[reidbarber]

If we implement this, we can use isMac() from @react-aria/utils. We would also want to do this in useColorField.

[devongovett]

On my Mac, scrolling up increments, and scrolling down decrements. I just checked and the same thing happens on my Windows machine when using the trackpad. I don't have a hardware mouse to test with.

That said, in both cases it depends on an operating system setting that changes the scroll direction (in the Touchpad settings on Windows). We tried to match the default for this I believe. Unfortunately, browsers don't expose this setting so we cannot easily change our behavior based on it. You can find a Chromium bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=156551 and a spec bug here: w3c/uievents#57