onValueChange not always fire

[alexanderoskin]

Describe the issue and the actual behavior

We are trying to implement React Native support like this.

import {useState} from "react";
import {TextInput} from "react-native";
import {NumericFormat} from "react-number-format";

function ControlledNumericFormat({value: propValue, onValueChange}) {
    const [value, setValue] = useState(propValue);

    function handleChange(values) {
        console.log(values);
        onValueChange?.(values.floatValue);
    }

    function handleInputChange(e) {
        setValue(e);
    }

    return (
        <NumericFormat
            value={value}
            onValueChange={handleChange}
            thousandSeparator={","}
            displayType="text"
            renderText={(value) => (
                <TextInput
                    value={value}
                    onChangeText={handleInputChange}
                />
            )}
        />
    );
}

All is good, working as expected. But only with numbers longer than three characters. If you type for example 1234 onValueChange is fired. If you type 12 onValueChange is not fire.

Provide a CodeSandbox link illustrating the issue

Here is CodeSandbox reproduction with html input https://codesandbox.io/s/controlled-numeric-format-forked-k6q6mf?file=/src/App.js

Try to enter the following numbers
1 - onValueChange is NOT fire
12 - onValueChange is NOT fire
123 - onValueChange is NOT fire
1234 - onValueChange is fire
12345 - onValueChange is fire and so on

Try to remove last character from 12345 number
1234 - onValueChange is fire
123 - onValueChange is fire
12 - onValueChange is NOT fire
1 - onValueChange is NOT fire
clean - onValueChange is NOT fire

[hazulu]

I also came across this issue today

[tomsnep]

I have the same issues. This makes the onValueChange function unusable. Would it be possible to look into this?

[rfviolato]

I have the same issue

[SemBakkumBitvavo]

I also encounter this issue. It's quite unreliable since I perform a set of calculations when either the user changes the value or it's programmatically changed. Would be highly appreciated to look into this?

[rfviolato]

I have created a minimum reproducible example in CodeSandbox.

I have added two examples there, one using the customInput prop and another using the renderText prop. I use the output of the onValueChanged to set a local component state to then render it in the UI. The issue is reproducible with both.

I have added a few buttons that set the state with different values, this is to showcase the problem that comes from externally controlling the NumericFormat component.

What works

Typing in the input will cause the onValueChange callback to be called for all the valid input a user may enter, you can validate that by noticing that any change will update the text below the input.

What doesn't work

Changing the value of NumericFormat programmatically will not always cause onValueChange's callback to be invoked.

If I alternate clicking the 1234 and 12345 buttons, I see the onValueChange being called 100% of the times, and I see the text below the input is updated.

But there are a few occasions that the onValueChange callback won't be called for values with 3 or less characters as stated by the report in this issue. Here are a few flows to be able to reproduce that:

• Reload the sandbox -> click a button that has a value of 3 or less characters -> the text won't be updated.
• Reload the sandbox -> click a button that has a value of more than 3 characters -> the text will be updated -> click a button that has a value of 3 or less characters -> the text will be updated -> click a different button that has a value of 3 or less characters -> the text won't be updated.

Have in mind that the text not being updated is a symptom of the onValueChange's callback not being invoked.

This shows that most of the times, 3 or less characters won't invoke the callback, it only does when the value goes from 4+ characters to 3 or less characters.

While checking the documentation related to this prop, it is mentioned:

This handler provides access to any values changes in the input field and is triggered only when a prop changes or the user input changes

And although the mention of "prop change" is a bit vague, I assume that the value prop is included, so this indeed looks like a bug in the library's side.

My gut feeling is that the library only invoked the callback when there's a change in the separator, be it its position, its addition or its removal.

[rfviolato]

@alexanderoskin your issue can be fixed if you stop using the displayType="text" prop or simply set it to "input".

[alexanderoskin]

@alexanderoskin your issue can be fixed if you stop using the displayType="text" prop or simply set it to "input".

How to use it in React Native with displayType="input"?

[rfviolato]

@alexanderoskin oh, I missed that you're using React Native. I'm not sure then, maybe you could also try to provide a custom input using the customInput prop.

[rfviolato]

I have opened a PR with a possible fix for this.

[s-yadav]

This is released on 5.4.0