Extra onChange is triggered if decimal contains "," as decimal separator

[xivanal]

Describe the issue and the actual behavior

1. set decimal separator to "," (not ".")
2. change decimalScale from 0 to 1
3. onChange event is triggered even if nobody touched the input

Note: This onChange is not triggered if decimal separator is "."

Describe the expected behavior

Do not trigger onChange if decimalScale is changed.

Provide a CodeSandbox link illustrating the issue

This is part of react component. Just click on button to change pre decimalScale and watch console. Only handleChangeA is triggered.

` const handleChangeA = (values: NumberFormatValues) => {
console.log("onChange from A");
};

const handleChangeB = (values: NumberFormatValues) => {
console.log("onChange from B");
};

const [numberOfDecimalPoints, setNumberOfDecimalPoints] = useState(0);

const handleButtonClick0 = (e) => {
e.preventDefault();
setNumberOfDecimalPoints(0);
};

const handleButtonClick1 = (e) => {
e.preventDefault();
setNumberOfDecimalPoints(1);
};

return (
<>
Precision 0
Precision 1
<NumericFormat
thousandSeparator=""
decimalSeparator=","
allowedDecimalSeparators={[".", ","]}
decimalScale={numberOfDecimalPoints}
value={0.5}
onValueChange={handleChangeA}
inputMode={numberOfDecimalPoints > 0 ? "decimal" : "numeric"}
className={classNames(fieldStyles.input, className)}
id={name}
name={name}
autoComplete="off"
/>
<NumericFormat
thousandSeparator=""
decimalSeparator="."
allowedDecimalSeparators={[".", ","]}
decimalScale={numberOfDecimalPoints}
value={0.5}
onValueChange={handleChangeB}
inputMode={numberOfDecimalPoints > 0 ? "decimal" : "numeric"}
id={name}
name={name}
autoComplete="off"
/>
</>
);`

Provide steps to reproduce this issue

Just click on button to change pre decimalScale and watch console. Only handleChangeA is triggered.

Please check the browsers where the issue is seen

• Edge