adobe / adobe/react-spectrum

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

Open
#5,474 3 comments 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.