Toggling secureTextEntry between true and false cause text to disappear on iOS #12939
Description
Description
I'm trying to create a custom password input where you can toggle if you can see the password or not. The bug is that when you change between true and false on textInput, the content of the input disappear.
Reproduction
First, you need to have a textInput with secureTextEntry. Then you enter a string in the textinput. After that you set the secureTextEntry to false and then back to true and you enter another character. The field should be set empty and then the new character appear.
On android, the cursor is set to the beginning of the field you do the same steps.
Solution
I found that the onChangeText props of the TextInput return an empty string when you set secureTextEntry to true.
Additional Information
React Native version : 0.41
Platform: iOS and Android
OS : MacOS
Here's a simple example of what I'm trying to do :
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity
} from 'react-native';
export default class test_secureTextEntry extends Component {
constructor(props) {
super(props);
this.state = {
hidden: true
};
}
render() {
return (
<View style={styles.container}>
<TextInput
secureTextEntry={this.state.hidden}
style={{ width: 100, height: 40, backgroundColor: 'grey' }}
/>
<TouchableOpacity
onPress={ () => this.setState({ hidden: !this.state.hidden })}
>
<Text>Go</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('test_secureTextEntry', () => test_secureTextEntry);