NumericInput trims value to 1 decimal point onBlur

[ayuan37]

Environment

• Package version(s): @blueprintjs/core 3.26.0
• Browser and OS versions: Chrome | MacOS

If possible, link to a minimal repro: https://codesandbox.io/s/blueprint-sandbox-jx0ef?file=/src/NumericInputBasicExample.tsx

Steps to reproduce

1. set prop clampValueOnBlur=true
2. enter any number with more than 1 decimal points, say 12.55
3. click on any whitespace outside the input box

Actual behavior

value being displayed is rounded to one decimal point, e.g. 12.6

Expected behavior

Expect value to be displayed as 12.55

Possible solution

Change the implementation of getSanitizedValue:

blueprint/packages/core/src/components/forms/numericInput.tsx

Line 249 in 70cf5a7

private static getSanitizedValue(value: string, stepMaxPrecision: number, min: number, max: number, delta = 0) {

So value isn't being rounded to have the same precision as minorStepSize (default: 0.1)

[ayuan37]

Rounding also happens when min/max changes, and when components mount/unmount:

blueprint/packages/core/src/components/forms/numericInput.tsx

Line 222 in 70cf5a7

const sanitizedValue =

[adidahiya]

This feels similar to #4024, so I pose the same question... what do you expect to happen once a user clicks the increment/decrement buttons? Do you expect it to go, for example 12.55 -> 12.65 -> 12.75 etc?

[ayuan37]

Thanks Adi. In our use case, we don't have buttons that users click to increment/decrement values, and we don't document the use of keyboard/mouse interactions to increment/decrement either.

I believe that, if a value was inputed by a user, then that value should be rendered as it was inputed.

• as the confusing thing is, we use NumericInput as the underlying component of another component, value is rendered as 12.6, but state is still 12.55, so any components that depends on value, will be rendered with value being 12.55 and not 12.6

And if the user wants to click buttons/keyboard/mouse interactions, then i think it could go, 12.55 -> 12.6 -> 12.7 etc.

[adidahiya]

I believe that, if a value was inputed by a user, then that value should be rendered as it was inputed.

Generally, I agree with this, and there is probably some change to the NumericInput component required here.

However, given the below information, this feels like an abuse of the component:

we don't have buttons that users click to increment/decrement values, and we don't document the use of keyboard/mouse interactions to increment/decrement either.

Why use a NumericInput at all then? Why not simply <InputGroup type="number">?

[ayuan37]

That's a good point. However the NumericInput component is used in many places and changing it to <InputGroup type="number"> might not be trivial in our case, but will consider.

I still think the above point with "if a value was inputed by a user, then that value should be rendered as it was inputed", is valid. Do you see this change being made in the near future?

[adidahiya]

I can imagine this getting "fixed" in the medium term, but I think a better terminology / mental model for this component is a "Numeric Stepper"; you should think about the increment/decrement interaction as intrinsic to its design.

And if the user wants to click buttons/keyboard/mouse interactions, then i think it could go, 12.55 -> 12.6 -> 12.7 etc.

This sounds like it could be confusing for some people as well, so I'm not sure about implementing this behavior.

Is there anything preventing you from modifying minorStepSize to get the behavior you want?