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

Activity

LFDanLu

LFDanLu commented on May 21, 2025

@LFDanLu
Member

Thanks for catching this! We can look at processing exponential notation and figuring out the equivalent amount of precision, guess it would just be looking to see if pointIndex is resolving to exponential notation with a negative power, taking that power and adding one to its absolute value (e.g. 1e-7 -> precision of 8)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @LFDanLu@sara0405

      Issue actions

        NumberField, useNumberField step precision bug · Issue #8274 · adobe/react-spectrum