useNumberField hook or NumberField component, have issues when increase(+) is pressed down and maxValue is set

[brianudensi]

Provide a general summary of the issue here

When using the useNumberField hook or the NumberField component and a maxValue is set an pressed down to increase(+) button value rapidly, when the maxValue is reached, you will have to press twice to decrease the input value, when the inputField is in Focus.
The reverse behaviour happens when there's a minValue set and the deccrease(-) button is pressed when the minValue is reached, you will have to press (+) twice for the increase the value of the input, when the input is in focus.

When maxValue is reached
On the first press of the - button the value quickly decreases and jumps back to the maxValue, but subsequent decrease(-) button press works as expected.

when minValue is reached
On the first press of the + button the value quickly increases and jumps back to the minValue, but subsequent increase(+) button press works as expected.

🤔 Expected Behavior?

When the maxValue is reached, the - button is pressed the value should decrease and should not require more that one press to do so.
When the minValue is reached, the + button is pressed the value should increase and should not require more that one press to do so.

😯 Current Behavior

When the maxValue is reached and the - button is pressed twice before any decrease happens.
When the minValue is reached and the + button is pressed twice before any increase happens.

💁 Possible Solution

A potential solution would be to stop the triggering of onPressStart as soon as the maxValue is reached.

🔦 Context

It's not much of a real problem, just that a user could assume they had change a value which didn't happen.

🖥️ Steps to Reproduce

Create a standard Numberfield component or use the default NumberField component from react-aria Spectrum.
Set a maxValue for the NumberField component and press down on the + button, hold button until maxValue is reached. when the maxValue is reached and the - is clicked. The value decrease and Jumps back to the maxValue.
So the decrease button has to be clicked twice for any decrease change to take place.

    <NumberField
        label="Step + minValue + maxValue"
        minValue={2}
        maxValue={21}
        step={3} 
    />

https://codesandbox.io/s/elated-water-x954vk?file=/src/App.js

Version

"@react-aria/numberfield": "3.10.0", "@react-stately/numberfield": "3.7.0",

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

macOS ventura13.2.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

This does not appear to happen as described in FF or Chrome (I assume Edge as well). So it's only happening in Safari. I can see it happening on our docs page as well with RSP https://react-spectrum.adobe.com/react-spectrum/NumberField.html#minimum-and-maximum-values

I swear we had an issue which covered this, but I cannot find it. What I remember from this is that in Safari, disabling a button causes some very different behaviors compared to other browsers. Either onPressEnd isn't being called on the spin button or onPressStart isn't being called because Safari hasn't recognized that the previous click ended even if we have.
We can check both of those here: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/spinbutton/src/useSpinButton.ts#L191

[brianudensi]

@snowystinger thanks for reply. I actually did experience, this bug testing with Chrome and FireFox. You can test the component on the Docs with any of these browsers to Validate my claim. It usually happens when the input field is in Focus. A suggestion based on this behavior, would be to prevent onFocus from firing if the input is already in focus.

[snowystinger]

How odd, I was unable to reproduce earlier with your codesandbox or with the docs page I referenced. However, now I can. So there's some sort of race condition involved as well. Thanks for the extra info and pushing back on it.
I noticed in Chrome there is a little flicker as well, where the value changes during the click that "does nothing".