Possible bug with TextInput and Chinese input method on iOS

[Kulbear]

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

[Kulbear]

Note that this is no longer valid, it only works on React Native version: 0.41.2.
Pay attention to the last updated date before you downvote a comment.

I'll give a workaround which can fix the problem with both my original project and this reproduction project. The only modified part is inside the render() method. Check it below

render () {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.inputField}
        value={this.state.text}
        placeholder="Type here to translate!"
        onChange={(evt) => this.setState({ text: evt.nativeEvent.text })}
        onChangeText={(text) => setTimeout(() => {this.setState({ text: text })})}
        onEndEditing={(evt) => this.setState({ text: evt.nativeEvent.text })} />
      <Text style={styles.previewText}>
        {this.state.text}
      </Text>
      <TextInput
        style={styles.inputField}
        placeholder="Another to focus, meaningless" />
    </View>
  );
}

Basically, setTimeout did the trick but I am not sure why. And I think the bug I mentioned in this issue is still worth to figure out and fix.

If you want to make your app looks like not allow Chinese input method, you can remove this line onChange={(evt) => this.setState({ text: evt.nativeEvent.text })}. It will look like this:

Though I don't think this is a good idea, just FYI.

[Proudmoor]

@Kulbear I have the same problem , this should be a bug , and thanks for the workaround you provided.

[shergin]

Could you please confirm that this issue still exists in current master? We recently fixed very similar issue and I hope that fix may help with this problem as well.

[Kulbear]

@shergin Will do in 1-2 days. 👏

[Kulbear]

@shergin With the dependencies below, it still doesn't work as expected.

"dependencies": {
    "react": "~16.0.0-alpha.3",
    "react-native": "github:facebook/react-native#d5dda1b1365321c0bb64eca0d1d88909f0f6c7fd"
}

[Swordsman-Inaction]

@shergin
I dug for a while. Here is how the issue happens:

• Enter some random word
• Click outside of the TextInput
• The textFieldDidChange gets called twice immediately, _nativeEventCount is increased by 2.
• The _onChange gets called immediately.
• this._inputRef.setNativeProps in _onChange is supposed to set native prop _mostRecentEventCount before the text is rendered, but somehow it didn't.
• So the eventLag is larger than 0, and the correct text could not be set.(Even thought the native UITextField's text shouldn't be wrong I think).
• Shit happens....

Here is the log I got from both side:

• iOS

TextChange -> 196
setText -> count: 196 ; recentCount: 196, text: f
TextChange -> 197
setText -> count: 197 ; recentCount: 197, text: f g
TextChange -> 198
TextChange -> 199
setText -> count: 199 ; recentCount: 197, text: fg
setText -> count: 199 ; recentCount: 198, text: fg

• RN:

receivedCount: 196
received text:f
render
receivedCount: 197
received text:f g
render
receivedCount: 198
received text:fg
render
receivedCount: 199
received text:fg
render
render

The count 198 and 199 is those two change after click the outside of the TextInput.
We can see that 198 is not set to native when the correct setText is called, maybe it's delayed for some reason I don't know.

I cannot dig deeper since I'm not familiar with iOS(I'm an Android developer), but there are two things I don't understand:

• Why textFieldDidChange is called twice while using Chinese Keyboard? It won't be called while using English Keyboard.
• Why is native prop mostRecentEventCount not set before the text is set in _onChange? Normal it does.

[Swordsman-Inaction]

A simple tmp workaround is remove the condition about eventLag, using if ( ![text isEqualToString:self.text]) instead of if (eventLag == 0 && ![text isEqualToString:self.text]) in here

But it will cause the UI syc problem when your JS running slowly, be careful if you want to use the approach.

[ethanyanjiali]

I'm having a same issue with iOS system Chinese input on TextInput.

[kidmysoul]

Have the same problem in japanese input(also in chinese input). Only in IOS

when typing, only the first character is correctly spelled (example:　ba→ば) but the rest characters donot work (example : ba→bあ)

when I use the setTimeout solution, I even cannot correctly input the first character. that solution does not work for me.(and I' m using redux-form Field to wrap the TextInput element)

Finnally I delete the redux-form,not use it and the TextInput get worked again.

[Kulbear]

@kidmysoul My workaround seems to be invalid after several releases since I made the original post... I think this problem will happen whenever we are using an input method like Chinese or Japanese input methods that require a selection after typing some character combination...

[honeyjie]

我也遇到同样的问题，不能输入中文。。。

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.