Possible bug with TextInput and Chinese input method on iOS

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

Original bug reproduction

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

[ankur-sardar]

Any Update on this issue? (exist in 0.55.4)

[fengzhang-57blocks]

problem happened in react-native version 0.55.0