adobe / adobe/react-spectrum

@react-stately/utils::snapNumberToStep changes value if step and min have different levels of precision

Open
#6,359 4 comments 0 reactions 0 assignees View on GitHub
enhancement
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

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.