Blueprint: Numeric input changes value to NaN

[fayzzzm]

Environment

• __Package version(s)__: last-version
• __Operating System__: OS-X
• __Browser name and version__: Firefox 79.0

Code Sandbox

Link to a minimal repro https://codesandbox.io/s/long-meadow-7ewe1?file=/src/App.js

Actual behavior

When you type not a number thing, such as 0.1.2, it changes the value to NaN.

Expected behavior

0.1. At least, it should return a valid number.

In your code in NumericInput component you have in handleInputChnage function you have done something like this:

private handleNextValue(valueAsString: string) {
        if (this.props.value == null) {
            this.setState({ value: valueAsString });
        }

        this.props.onValueChange?.(+valueAsString, valueAsString, this.inputElement);
    }

Possible solution

On handleNextValue function, it should be changed to something like:

// It should return valid number or 0
this.props.onValueChange?.(parseFloat(valueAsString) || 0, valueAsString, this.inputElement);

Yes, I know what you would like to say, just use the second parameter valueAsString, but I will do the same thing in order to get valid number.

[adidahiya]

I'm not exactly sure what the solution is but there is definitely a usability bug here -- in your sandbox, once you get a NaN, there's no way to escape that state and type a number, so we should fix that.

[fayzzzm]

@adidahiya I will look more detail to this component and will try to find a better solution.

[adidahiya]

Actually, my comment above is wrong -- your sandbox was using an old version of blueprint core, 3.24.0. The behavior in the latest version (3.31.0) does not have this usability bug. But there was a new bug introduced in 3.30.0: https://github.com/palantir/blueprint/issues/4320

[fayzzzm]

I know about bug #4320, and has an idea of how to fix it. But unfortunately, I was busy last week. I will try to fix this issue.