Decimal-pad keyboardType not showing comma separator on Samsung keyboards

[FRizzonelli]

Is this a bug report?
YES

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 113.07 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 4.2.0 - ~/.npm-packages/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.2
API Levels: 16, 17, 18, 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.7 => 16.4.14
@types/react-native: ^0.56.4 => 0.57.7
react: 16.4.1 => 16.4.1
react-native: 0.57.4 => 0.57.4
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-rename: 2.1.9

Description

I'm trying to use the decimal-pad on my textinput, the feature was released in 0.56.0. The decimal dot is correctly showed in the keyboard and it's working (even on Samsung devices). The problem is that I'm not able to use the comma in the keyboard, which in almost every Europe culture is the default separator.

I've already check the PR here and also found all the related bug: #12988 #17474
I'm currently testing on a Samsung J5 with Android 6.0.1 and on a Samsung S9 with 8.0.0

Is there any workaround where I can explicitly set the digits for Android?

EDIT:
After some other testing, I can confirm that the bug is related to Samsung keyboards. On HTC and Nexus works great, even with custom keyboards.

Reproducible Demo

<TextInput keyboardType="decimal-pad" />

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[ghost]

The issue still exists. I am testing on a Samsung phone and currently i am facing the same problem. The dot is present in the keyboard but it is disabled. I am using 0.57.4 version of react-native.

[danilobuerger]

Workaround for now is #17474 (comment)

I had to add autoCapitalize="none"

[douglasjunior]

Same here, tried with keyboardType="decimal-pad", autoCapitalize="none" and removing editable, but doesn't work.

The comma doesn't appear on the Samsung keyboard.

Motorola with Google Keyboard.

[DickLemm]

I am using react-native 0.61.1.
keyboardType="decimal-pad"
autoCapitalize="none"
And we still are missing any decimal separator (dot and comma) on some keyboards (samsung, lg). solution is given here
#12988. But now I understand why this is a solution.

I had a closer look what is going on at the android code and find what is causing this:
On the devices where there is no problem, autoCapitalize property was updated in android before the keyboardType.
On the devices without decimal separator, autoCapitalize property was updated in android after the keyboardType.
Not setting the autoCapitalize property does not help, because the default value ('sentences') will be set.

In android, InputType.TYPE_NUMBER_FLAG_DECIMAL has the same value as InputType.TYPE_TEXT_FLAG_CAP_WORDS (8192) and corresponds to the same bit!!!!

In the ReactTextInputManager.setAutoCapitalize method, all capitalize flags are first unset, including InputType.TYPE_TEXT_FLAG_CAP_WORDS (which is the same bit as TYPE_NUMBER_FLAG_DECIMAL flag!!). After that, the flag that corresponds to the property set for autoCapitalize, is set. So Settings that autoCapitalize property to something else then 'words', will cause this particular bit to be set to 0 and will also disable the TYPE_NUMBER_FLAG_DECIMAL.

Therefore the solution is: set autoCapitalize to "words" when keyboardType is set to "decimal-pad".
(do not do this when you do not want the decimal separator).**

Another solution that also works is setting (using setNativeProps) the keyboardType to 'numeric' and back to 'decimal-pad' in the componentDidMount method. This will cause the setInputType method to be called an extra time after the ReactTextInputManager.setAutoCapitalize method.

Just setting autoCapitalize to "words" is the easiest way however.

Adjustment for react-native code would be to somehow have an ordering in the ViewManagerPropertyUpdater.updateProps method. There might be more flags that correspond to the same bit (38 InputType flags but only 32 bits in an integer). So the order of updating the properties does matter.

[jocoders]

Hello! Any new decision for this problem? I tried everything:

• removed autoCapitalize="none"
• changed keyboardType on decimal-pad/numeric
  Nothing is working for me

[DickLemm]

Did you try autoCapitalize="words" and keyboardType="decimal-pad" ?

[Ck088]

Did you try autoCapitalize="words" and keyboardType="decimal-pad" ?

This worked for me on Galaxy Tab A.

[ghost]

Did you try autoCapitalize="words" and keyboardType="decimal-pad" ?

Thanks. This worked for me, too.

[Bardiamist]

Same issue

[DickLemm]

Then maybe the same solution works for you as well! See tips just above.

[Bardiamist]

I left comment for prevent autoclose inactivity issue. I made autoCapitalize="words". I hope that helped for my app user (I can’t reproduce because don’t have Samsung Galaxy. It possible to emulate? I tried Samsung Galaxy skin but got not Samsung keyboard)

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[Bardiamist]

Some user has this problem on LG G8 even if autoCapitalize="words" with keyboardType="decimal-pad".

[giniedp]

Users still report that the decimal input is not working. I can not reproduce. All solutions above did not work. Any way to reproduce it in the simulator? Any thoughts on this issue?

[rafaelnco]

hey @giniedp have you got some solution for this problem? i am considering implementing a Virtual Keyboard

[giniedp]

unfortunately i haven't

[rafaelnco]

@giniedp recently i have stuck into another native problem and solved it by implementing a JS side solution, do you think a Virtual Keyboard is an appropriate soolution to this? seems like some banking apps actually do this

[giniedp]

@rafaelnco yes, a virtual keyboard makes sense.

[rafaelnco]

hey @giniedp this has been recently discussed on my team and we are really considering implementing virtual keyboards for this use cases, key pain point is supporting OS accessibility definitions that impact on keyboard behavior..