Keyboard language changing with multiple TextInput with secureTextEntry #22543
Description
Environment
$ react-native info
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
Memory: 224.74 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
API Levels: 17, 21, 23, 25, 26, 27
Build Tools: 23.0.1, 23.0.3, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3
System Images: android-25 | Google APIs Intel x86 Atom_64
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.7 => 0.57.7
Description
First of all this issue is related to the latest version of iOS starting with iOS 12.0, iOS 12.1 and more (I wasn't experimenting this issue using the iOS 11.1 or 10.X)
It seems that the secureTextEntry change the keyboard locale on IOS when there is one field in form who's not secure.
My current project is using react-native 55.4 and I am having the same problem with it.
For my test I created a new project with the newest version of react-native 👍
Reproducible Demo
To reproduce this bug you just have to make a fresh installation as mentioned before with this command :
react-native init test577
Then you have to change the language of the iPhone to put it in French (maybe the issue is same with other language but I was testing with French).
To do so go to Setttings > General > Language and Region. Then change the language of the iPhone to French and the region to French (maybe the region can't be ignored). You should have something like this :
Here is a reminder of the configuration of the default project is and the code I am using :
Package.json
{
"name": "test577",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.1",
"react-native": "0.57.7"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.50.0",
"react-test-renderer": "16.6.1"
},
"jest": {
"preset": "react-native"
}
}
Code
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<TextInput placeholder={'email'} />
<TextInput secureTextEntry={true} placeholder={'password'} />
<TextInput secureTextEntry={true} placeholder={'confirm password'} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Just the simple default example with the bug as describe before.
In addition we can see that the problem seems to be cause by the secureTextEntry={true} only when you have two or more (the behavior is actually not very logical)
So if you change the code and keep only two fields as follow, it will work perfectly :
Works
<TextInput placeholder={'email'} />
<TextInput secureTextEntry={true} placeholder={'password'} />
Same with only secureTextEntry two or as much as you want will work properly :
Works
<TextInput secureTextEntry={true} placeholder={'password'} />
<TextInput secureTextEntry={true} placeholder={'confirm password'} />
...
As soon as you add two TextInput with a secureTextEntry with one field that isn't a secureTextEntry the keyboard starts to bug as described.
With Three :
Doesn't Works
<TextInput placeholder={'email'} />
<TextInput secureTextEntry={true} placeholder={'password'} />
<TextInput secureTextEntry={true} placeholder={'confirm password'} />
<TextInput secureTextEntry={true} placeholder={'reconfirm password'} />
The first one and last one keeps the keyboard as it is and the two others change the keyboard.
So one way to "deal" with it to make it works is by adding a line in between the secureTextEntry as follow :
Works
<TextInput placeholder={'email'} />
<TextInput secureTextEntry={true} placeholder={'password'} />
<TextInput placeholder={'foo'} />
<TextInput secureTextEntry={true} placeholder={'confirm password'} />
In this case the keyboard keeps working properly.
I so tried to add the field and hide it with style :
Works
<TextInput placeholder={'foo'} style={{height:1}}/>
Doesn't Works
<TextInput placeholder={'foo'} style={{height:0}}/>
Changing the order of the fields also seems to make it work again :
Works
<TextInput secureTextEntry={true} placeholder={'password'} />
<TextInput secureTextEntry={true} placeholder={'confirm password'} />
<TextInput placeholder={'email'} />
I also tried with other elements like a View or a Text but didn't work with these elements.
Hope all this informations will be helping to correct this bug that is pretty annoying
And that is reproduce on both Simulator and Device
Related Issue
#21572