React-number-format: Problems with keyboard in mobile

[nataliazanolli]

When send the props fixedDecimalScale, or prefix={'$'}, like has one example in demo, the keyboard in mobile has problem.

Select the input to open keyboard, change the keyboard mode to select numbers, when put the first number in input, the keyboard mode returns to letters.

It's like if when change the text of value internally the keyboard mode changes.

[nataliazanolli]

So, I put the type='tel', but in iOS mobile no has the ',' and the '.' to digit decimal numbers, then i'm back to type text.

What I did to solve my problem, is ugly but work for me: In onFocus I change the state to render without props fixedDecimalScale and thousandSeparator, and in onBlur I change the state again to render with theese two props.

Two problems I solve this way:

1. Mobile keyboard to not change the mode after users select number mode;
2. When users digit too fast that select input goes to final and don't allow the users digit more without click in right position to permit digit more.

[mosijava]

it would be more convenient if it support input type="number". changing keyboard in mobile to numbers are actually annoying when the input should get numbers only.
I hope they fix it

[resobyte]

id="numberFormat"
decimalSeparator=","
thousandSeparator="."
inputMode="decimal"
pattern="[0-9]*" .../>

I used this code.

Android device screenshot:

IOS device screenshot:

If we can find a way to bring "," to the ios keyboard, the problem will be solved

Android is correct, but iOS not display "," comma..

Can you help me?

[marknguyen85]

id="numberFormat"
decimalSeparator=","
thousandSeparator="."
inputMode="decimal"
pattern="[0-9]*" .../>

I used this code.

Android device screenshot:

IOS device screenshot:

If we can find a way to bring "," to the ios keyboard, the problem will be solved

Android is correct, but iOS not display "," comma..

Can you help me?

same with you.

[mosijava]

id="numberFormat"
decimalSeparator=","
thousandSeparator="."
inputMode="decimal"
pattern="[0-9]*" .../>

I used this code.

here you can see unfortunately Firefox doesn't support "inputmode" attribute.

[dccarmo]

@s-yadav I think this commit (https://github.com/s-yadav/react-number-format/commit/1ade39ffc816da04b566387b3817e6512355ff9e) broke the functionality being discussed here: the iOS keyboard show up with the numeric keyboard that doesn't have the decimal point/comma key and there's no way to override it.

[s-yadav]

@dccarmo I will check this. This does says it will show correct input on inputmode="numeric"
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

In meanwhile you can still override it using.

<NumberFormat inputMode="decimal" />

or remove it using

<NumberFormat inputMode={false} />

[s-yadav]

@dccarmo Can you also share device and OS information.

[dccarmo]

@s-yadav That's great, I didn't know we could override it.

I'm testing on an iPhone XS Max on iOS 13.4.1.

[s-yadav]

@dccarmo The latest release removes inputmode on IOS device when decimals, minus characters are required.

[dccarmo]

@s-yadav Awesome, thank you! I think this issue can probably be closed (@nataliazanolli).