React-number-format: Changing decimals does change value inside input, but doesn't call onValueChange

[arpontes]

I have an input field that receive number of decimals through state and changes in this field are saved to state (including formatted value). When the state changes, the value inside input field does change to right number of decimals, but since it's event "onValueChange" isn't called, my state keeps and incorrect version of formatted value. I understand that the value really does not have changed, but how do I update my formatted value state?

This behavior can be seen in this mock https://codesandbox.io/s/wowovwkrp5

[s-yadav]

Yes this looks like a bug. The problem is NumberFormat don't tigger onValueChange when some change occur because of prop change. While it should trigger that.
Will fix this.

[s-yadav]

This would require calling manually onValueChange without an event object. As its not triggered with actual event onChange does not call.
This might be a breaking change. As accessing event object on onValueChange might break code in this case (which few people may be doing).
I am evaluating the idea of not passing event object in onValueChange as anyway event can be of any type or we will not have any event at all. This causes ambiguity on API. So I guess removing it might make much of sense. People should use actual event callbacks (onChange, onBlur) etc if they need something out of event object.
This fix will go on 4.0.0 as its a breaking change.

[s-yadav]

Fixed in v4.

[sezarthiago]

@s-yadav I think that approach doesn't seems right, a callback like onValueChange shouldn't be called with no triggered event. To solve this kind of problem I never save the formatted value in state and when I need the formatted value I get it from the component.

I made a little change the example above to show my point: https://codesandbox.io/embed/numberformatformat-0e83o
I also create this new example to show how this change introduced a new bug #317 : https://codesandbox.io/embed/numberformatonvaluechanged-tvju1

[yimejky]

Another demonstration of bug, you cant have associated values, because onValueChange will trigger twice. Made my solution using refs and taking value inside onChange. With ref I can access inner state and take float value const floatValue = parseFloat(this.ref.current.state.numAsString);

<NumberFormat
    value={price}
    onValueChange={({ floatValue }) => {
        this.setState({
            price: floatValue,
            perDistance: floatValue / (distanceInMeters / 1000),
        });
    }}
/>
<NumberFormat
    value={perDistance}
    onValueChange={({ floatValue }) => {
        this.setState({
            price: floatValue * (distanceInMeters / 1000),
            perDistance: floatValue,
        });
    }}
/>

[DaveVaughan]

Ah sweet. At least I know it was possible to get an event out of onValueChanged in a previous version now. Have spent entire night trying to get this improvement to work.

[arpontes]

@sezarthiago , but this way i'm stuck with numberformat component in order to display formatted value. What if I want to get the formatted value and use it in another place, with another component?

I don't see the point of return formattedValue if I shouldn't record it in my state...