react-native: Decimal-pad keyboardType not showing comma separator on Samsung keyboards
Is this a bug report? YES
Environment
React Native Environment Info: System: OS: macOS High Sierra 10.13.5 CPU: x64 Intel® Core™ 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" />
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 4
- Comments: 21 (4 by maintainers)
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 https://github.com/facebook/react-native/issues/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.
Did you try autoCapitalize=“words” and keyboardType=“decimal-pad” ?