useNumberField hook or NumberField component, have issues when increase(+) is pressed down and maxValue is set
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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.
```jsx
```
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_
Contributor guide
Assessment
This issue has not been assessed yet.