Intl.NumberFormat with fraction digits. input box <=> form state mismatch

naseemkullah commented 9 months ago

When doing the same as https://s-yadav.github.io/react-number-format/docs/customization#intlnumberformat-based-formatting but with 2 maxFractionalDigits...

Also decimalScale is set to 2 and fixedDecimal is set to true.

Describe the issue and the actual / expected behavior

when user types in 3 decimal places, the input box UI rounds up (e.g. 1.239 shows up as 1.24 in the UI), ok great. But the state being set in the form is 1.239 - I don't want that, I just want 2 digits. i.e. what you see is what you get - no mismatch between UI and form state.

Provide a CodeSandbox link illustrating the issue

Provide steps to reproduce this issue

notable props

  const { size, ...rest } = useNumericFormat({
    decimalScale: 2,
    allowedDecimalSeparators: [',', '.'],
    fixedDecimalScale: true,
    valueIsNumericString: true,
  });

and try this format prop on a NumberFormatBase (along with the rest props above (there is a type mismatch with size, so its omitted)

     format={(value: string) => {
                        if (!value) return '';

                        return Intl.NumberFormat(locale, {
                          style: 'currency',
                          currency,
                          maximumFractionDigits: 2,
                        }).format(Number(value));
                      }}

akhilmannam commented 9 months ago

Can you provide a sandbox link describing your issue?

s-yadav commented 9 months ago

Yes, please include Code sandbox to demonstrate the issue, most likely onValueChange is not handled correctly.

s-yadav / react-number-format