Callback onValueChange is called even with no triggered event

[sezarthiago]

v4 added the feature "Trigger onValueChange if the value is formatted due to prop change" to solve the issue #227 but that change has added a behavior that may be considered a bug. Now the callback onValueChange is called when props are changed and this don't seems correct, that kind of callback only has to be called when a event is trigged to keep the component consistent.

Here is an example https://codesandbox.io/embed/numberformatonvaluechanged-tvju1 Setting 3 in the first field and 1 in the last one the value is changed to 0.99

here is an example how the issue #227 could be solved https://codesandbox.io/embed/numberformatformat-0e83o

[jonathanfalcon95]

I have this problem since I have onValueChange is triggered every time my component is rendered, this is an error

[DamieUk]

Same problem. why do we need to trigger onValueChange instead of using getDerivedStateFromProps ? I dont understand. Not good solution

[DaveVaughan]

I've been entrusted to fix a project which is using this component. At least return an event or something so we can tell if the onChangeEvent is due to the user typing something or if its because the model has updated. The nature of the code in the project is such that multiple direction calcs can be used, but this just makes it melt the system answering itself continuously.

[s-yadav]

onValueChange is a custom callback and is meant to be triggered when the format value is changed by any mean (not only through some event).

The format can change in three different places.

• onChange (when a user is typing)
• onBlur (to correct the partial format)
• on prop change (when the format props are changed)

Thats the reason onValueChange !== onChange and does not receive an event object.

You can just use onChange if required. And get the formatted value using e.target.value. But you will not get the other type of values with the onChange. And also, it will not be triggered when the value is changed by other ways.

You can also combine use of onChange and onValueChange to get your desired effect.

[s-yadav]

Do you guys feel the doc is confusing for onChange vs onValueChange. I am happy to update doc to reduce the confusion.

[gusflopes]

Do you guys feel the doc is confusing for onChange vs onValueChange. I am happy to update doc to reduce the confusion.

Yes please... I'm still trying to figure out how to use this onValueChange.

[Ericnr]

@s-yadav why is the values object not passed to onChange? Tbh I don't see why I'd even need onValueChange if the values were accessible in onChange.

[john-melin]

Different call behaviour for onValueChange and onChange is horrible. People will rely on onValueChange to get the values as number or a formatted number, onChange will not return this.

This makes this component completely unusable in a form as onValueChange will validate the component on mount and e.g having it set to required, showing as "this input is required" on render.

[Manviel]

Also cannot test via @testing-library/react, because when you enter a value, onChange is not called.

UPD: it works with fireEvent but does not work with userEvent which is weird.