search

s-yadav / react-number-format

React component to format numbers in an input or as a text.
MIT License
3.89k stars 410 forks source link

Weird behaviour when using different IMEs with thousand seperator #843

Open HeRo3S opened 5 months ago

HeRo3S commented 5 months ago

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. image

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=](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

tinncdev commented 2 months ago

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 commented 1 month ago

I guess, he typed 10000, but displayed 1110000.

On MacOS, it looks like the following screenshot.

スクリーンショット 2024-10-11 14 15 57
HeRo3S commented 1 month ago

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 commented 1 month ago

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

This is related to https://github.com/s-yadav/react-number-format/issues/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