Skip to content

NumberField, useNumberField step precision bug #8274

Open
@sara0405

Description

@sara0405

Provide a general summary of the issue here

NumberField decrease/increase buttons are not decreasing/increasing value as expected when step is small due to JS transforming step into exponential notation.

🤔 Expected Behavior?

Even when step is small, decrease/increase should work.

😯 Current Behavior

After clicking a couple of times on increase/decrease button, value gets stuck and doesn't increase/decrease anymore.

💁 Possible Solution

Change implementation of roundToStepPrecision function to support exponential notation of numbers.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/utils/src/number.ts#L24

🔦 Context

console.log(0.0000001) // 1e-7
console.log(0.000001) // 0.000001

https://www.typescriptlang.org/play/?#code/GYVwdgxgLglg9mABAJzuAJgFTgZSgUwAcAFZfCGAZ3jAAoA3AQwBsR8AuRMEAWwCN8yADSJKBQp279BASkm8ByRAG8AUIkTN8UFGjDp86AGos2iALyImrfAG51m7aPF5kMMAHMLzogDoouFBunrQy9hpaOoRw7lAAkvr4AB7eYkSu7h6+7gZJAPLAtADkvkVhDpGIhGQU1Aje0bEJuYgAfJYADIgA-D6EGZ6+Wp5QABaIALRVMWDxiSmcHeGIEAiUcFpDcB7FpORUNIjAcEpphEUiZyLV+3Vg5RowwIi0N7WHrYgdMioOEU7RADu3gAsowxr4gbQAIwda41A4IB4aXQYQwmGyg8GjXyoDC0PGJYymfCIABU00BPwA9JTlgBfBxkKAgZBIQkGYk2eyM1SqDnYPBEPbvBAwkQdXwdaUy6XQ8oCwLChF3cVfKWyuUKvRYJUkFU0NWSzUdeX2RVC-W3Q3QiUamVmvlAA

🖥️ Steps to Reproduce

Click on the increase or decrease button multiple times. Notice how at some point it's not possible to increase/decrease anymore.

https://codesandbox.io/p/devbox/patient-haze-938prj?workspaceId=ws_WLQRjyxzXR8tUrnqkcKLtT

Version

3.42

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions