React-number-format: [onChange] value not change when i delete negative symbol on textbox with backspace

[rioarray]

version 4.0.8

When typing the following:
'1 then '2' then '-',
or '-' then '1' then '2'
It would display as '-12'.

but when i delete negative symbol with backspace, that value cannot be change and still -12 not 12

im using onChange props

[lamnt95]

Me too, How to fix ???

[eMarek]

I have the same (or similar) problem. I think that onChange property does not trigger when you remove minus in front of number while onValueChange does trigger totally normal. @s-yadav would you maybe have some time to take a look on this one?

[WPaczula]

onChange is not triggered for me as well after deleting minus sign.

[mackankowski]

Hey all,

Nothing works but this:

const [value, setValue] = useState();

<NumberFormat
            onValueChange={({ value }) => {
              setValue(value)
            }}
            value={ value }
            ....

Any other conclusions? If not, let me try to commit the fix pretty soon...

Best regards,
Maciej

[mklosterboer]

Looks like this is because of a special case being handled in onKeyDown. UpdateValue will call to onValueChange, but nothing is calling props.onChange(), so any handler is not being used.
https://github.com/s-yadav/react-number-format/blob/3b03cab266d7b6f8906d0136c29b957c48e52ae3/src/number_format.js#L830-L840

I am having to use onChange() instead of onValueChange() because I am changing the value from outside state and that is causing the onValueChange() to be fired in an infinite loop.

I don't really know the solution here but props.onChange() needs to be called for every event that would have triggered an onChange() in a standard input element.

I'll keep looking and see if I can find a solution, but someone more familiar with the project may be able to find one faster.

[mklosterboer]

As a workaround, I decided to use onValueChange() only if the user is removing the negative from a number.
Here is a sandbox with this working or see below for the code snippet inside our formatter wrapper.

const handleOnChange = (e) => {
    var floatValue = getFloatFromFormattedNumberString(e.target.value);
    onValueChange(floatValue ?? null);
};

const handleOnValueChange = ({ floatValue }) => {
    // value was previously negative, and the user is removing the negative
    if (value.toString().charAt(0) === "-" && floatValue >= 0) {
        onValueChange(floatValue);
    }
}