Possible bug with TextInput and Chinese input method on iOS #12599
Description
Description
I have some TextInput components in my project and there should be some problems with onEndEditting and onBlur props of TextInput component. If I make the TextInput blur before I confirm the entered content from the Chinese input method, all the changes I made during this round of focus will be lost. Check the video below, starts from 0:17, the video demonstrates the issue.
Basically, it should be an issue between the system Chinese input method and the RN TextInput component. I made a 30-second video record to demonstrate this issue.
https://www.youtube.com/watch?v=BG0WNHW2MEc
Reproduction
I don't know how to work with Chinese input methods on rnplay, so I've pushed a sample project with minimal code for reproduction.
Current code with a workaround
I created a new project. The only modified file is the index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
export default class ChineseTextInputIssue extends Component {
constructor (props) {
super(props);
this.state = {
text: ''
};
}
render () {
return (
<View style={styles.container}>
<TextInput
style={styles.inputField}
placeholder="Type here to translate!"
value={this.state.text}
onBlur={(evt) => console.log('onBlur event:', evt.nativeEvent.text)}
onChange={(evt) => console.log('onChange event:', evt.nativeEvent.text)}
onChangeText={(text) => this.setState({ text })}
onSubmitEditing={(evt) => console.log('onSubmitEditing event:', evt.nativeEvent.text)}
onEndEditing={(evt) => console.log('onEndEditing event:', evt.nativeEvent.text)} />
<Text style={styles.previewText}>
{this.state.text}
</Text>
<TextInput style={styles.inputField} placeholder="Another to focus, meaningless" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
inputField: {
margin: 30,
height: 50
},
previewText: {
padding: 10,
fontSize: 42
}
});
AppRegistry.registerComponent('ChineseTextInputIssue', () => ChineseTextInputIssue);
Solution
As you can see from the video, the displayed text and the text in the TextInput component should be identical.
Additional Information
- React Native version: 0.41.2
- Platform: iOS, not tested on Android
- Operating System: macOS 10.12.3