Characters duplicated when entering numbers using any Japanese Keyboard

[jackall3n]

When entering into <NumberFormat /> using any Japanese Keyboard, characters are duplicated as a user types and deletes.

Found when using iOS environment.

Below is an example using the 'Live Demo' with the Japanese Kana Keyboard.

[s-yadav]

It might be specific to Japanese keyboard you are using. I tried with google Japanese keyboard. And it works fine. I have an android device.

[jackall3n]

So, it seems as though it’s specific to only iOS Japanese keyboards.

[jackall3n]

This can also be replicated using a Japanese keyboard on a mac, using the built in Japanese keyboards provided by OSX.

[jackall3n]

After further investigation, this issue with the iOS keyboard is present in ANY input field where its value is being formatted/modified while a user is in focus, ReactJS or otherwise.

A basic input formatting example is here: https://kk8nj5m263.codesandbox.io/.

This is a very large bug, well outside the scope of React and especially this library.

[huanhuang-wang]

is there any workaround for this ? this library is very helpful if without this bug

[jackall3n]

@huanhuang-wang we found the best approach was, for anyone using a Japanese style input method, to only display the formatted input on blur. Unfortunately, due to the extent of the issue on iOS there was really no other workaround we could come up with.

[donovantc]

@jackall3n would you mind sharing a code example as to how you achieved that? Did you do that with this library?

[jackall3n]

@donovantc sorry, I no longer have access to this code. However, the solution didn't use a library (although this library might benefit from the added feature, I'll have a think about adding something in).

Basically the solution was to attach an onFocus/onBlur listener to the field, when the cursor focused on the field the component would set a state value true or false. This value would switch whether the component visible was the react-number-format component, or a plain input field.

I'm sure this library could have an additional prop named something like 'formatOnBlur' or something more intuitive with this functionality set internally.

Hope that helps you with your issue.

[donovantc]

@jackall3n yeah, thanks for the quick feedback. I get what you mean and also +1 that it would be nice for this lib to have a prop like that. I'll keep an eye on it or do something about it but I cannot guarantee that ;)

[jackall3n]

@donovantc haha won’t hold you to it then

[pkatul]

We used this solution.
const inputMode = options.maximumFractionDigits > 0 ? 'decimal' : 'numeric';
Also add this property in NumericFormat like
inputMode={inputMode}