Repository navigation
Decimal-pad keyboardType not showing comma separator on Samsung keyboards #22005
Description
Activity
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 infoon a project using the latest release.Workaround for now is #17474 (comment)
I had to add
autoCapitalize="none"Same here, tried with
keyboardType="decimal-pad",autoCapitalize="none"and removingeditable, but doesn't work.The comma doesn't appear on the Samsung keyboard.
Motorola with Google Keyboard.
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.
Reacted by Jared Kove, Hieu (Ryan) Hoang, ErwinDB, Jhonatan Froeder, Patrick Phadi, Sandro Scheiwiller, legend-in, Imam Robani, Bardiamist, Loginov Roman and 4 moreReacted by Daniele Serena, whileMeAwakeMeCode, Jhonatan Froeder, Patrick Phadi, Imam Robani, Rafael Natã and sommczReacted by Patrick Phadi, Gerson Montenegro and Rafael NatãReacted by Douglas Nassif Roma Junior, Levi Buzolic, Jared Kove, Jhonatan Froeder and Rafael Natã4 remaining items
Same issue
Then maybe the same solution works for you as well! See tips just above.
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)
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.
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.
Some user has this problem on LG G8 even if autoCapitalize="words" with keyboardType="decimal-pad".
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?
unfortunately i haven't
@rafaelnco yes, a virtual keyboard makes sense.
Hello everyone, I just had the same problem with my application, I see that the error only happened on a Samsung device with Android 13, however I created a new test application with the latest version of react-native (0.76.1) but I see that now it is replicated on all Samsung devices. The solution that is currently being evaluated is to use a "phone-pad" for Android instead of the "decimal-pad", however in Android we see that the "phone-pad" does not show the comma by default but rather shows it in a submenu, and since it is needed to enter decimal amounts, it can be somewhat annoying for the user. Below I share the results of the tests carried out:
-
Samsumg a31 android 12 keyboardType: decimal-pad | phone-pad
-
Samsumg s10 android 12 keyboardType: decimal-pad | phone-pad
-
Samsumg s20 android 13 keyboardType: decimal-pad | phone-pad
-
Huawei p20 lite android 11 keyboardType: decimal-pad | phone-pad
-
Pixel 8 android 15 keyboardType: decimal-pad | phone-pad-menu-1 | phone-pad-menu-2
At this point I am trying to apply two solutions but I have not had success, one is to force the system to leave the like enabled in Samsung's "decimal-pad" and the second is to try to leave the "phone-pad" comma in the main menu, however these are issues that the system handles and I have not been able to achieve them.
I would like to know if @hramos , @giniedp , @danilobuerger , @douglasjunior . @FRizzonelli and @DickLemm who have contributed in this case have had a solution for each of their problems.
Reacted by Bardiamist and Ewa Guziejko-
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" />