Weird behaviour when using different IMEs with thousand seperator

[HeRo3S]

Describe the issue and the actual behavior

I tried to type 10000 to the input field using Windows' Vietnamese keyboard layout (using thousandSeperator props), but the output display incorrectly.

Though the output would display correctly when I exited the input field.

Describe the expected behavior

The input data display correctly when user trying to input.

Provide a CodeSandbox link illustrating the issue

Using the documentation's sandbox here:
https://codesandbox.io/p/sandbox/thousandsgroupstyle-demo-u3ip59?from-embed=

Provide steps to reproduce this issue

Use Windows' Vietnamese keyboard layout and type 10000 or more (must type 2 different numeric characters to see the bug)

Please check the browsers where the issue is seen

• Chrome
• Chrome (Android)
• Safari (OSX)
• Safari (iOS)
• Firefox
• Firefox (Android)

[tinncdev]

In your sandbox, the thousandsGroupStyle was set to indian style lakh so the output 11,10,000 is correct
Either remove thousandsGroupStyle or set it to thousand to match your expected output.

Reference to the doc: https://s-yadav.github.io/react-number-format/docs/numeric_format/#thousandsgroupstyle-string

[RyoheiTomiyama]

I guess,
he typed 10000, but displayed 1110000.

On MacOS, it looks like the following screenshot.

[HeRo3S]

Yeah, it only occurred so far on MS Windows with Microsoft's IME. I tried to ask a colleague who use MacOS to test it and didn't see any problem with it.
My only guess is that it's Microsoft's own way of handling input buffer in other IME that's causing the format function to kinda freak out.

[tinncdev]

Did not notice the Windows' Vietnamese keyboard part in previous comment.

This is related to #636

which exactly similar to this react issue which closed for duplicated to this 9 years old issue

this was too much for my little pricing input so I ended up letting the input as is and just use numericFormatter method to show a small formatted text as hint bellow the input