@react-stately/utils::snapNumberToStep changes value if step and min have different levels of precision
- 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
The utility function used in useNumberFieldState snapNumberToStep, alters the input value unexpectedly and incorrectly when given different levels of precision of min and step. For instance, if I want the minimum value to be 0.001 but I want the stepper to step in increments of 1, using useNumberFieldState will return my inputValue with an extra 0.001 added onto it.
It is relatively common to have a specific min and a separate desired step size, and this is causing the numbers displayed to the user to be inaccurate, and ugly, adding on extra 0s to the end.
### 🤔 Expected Behavior?
snapNumberToStep(1000, 0.001, undefined, 1) = 1000
### 😯 Current Behavior
snapNumberToStep(1000, 0.001, undefined, 1) = 1000.001
### 💁 Possible Solution
Ignore the min when calculating remainder.
Instead of:
```
const remainder = (value - (isNaN(min) ? 0 : min)) % step;
```
Do:
```
const remainder = value % step;
```
Later on in the function, the new value is checked to see if it is below the min, so this additional check is only causing problems.
### 🔦 Context
I want to be able to limit the size of shapes to a small number, such as 0.00001, but also allow the user to step the number field by a reasonable step size such as 1 unit. When using the number input, it alters the value of the number I give to it.
### 🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/affectionate-worker-jv6567
### Version
^3.26.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 14.4.1
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.