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.

[Kulbear]

This is still a problem for Chinese/Japanese/Korean input method.

[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.

[wlwg]

I’m having this problem of using TextInput with Chinese Pinyin probably due to the same bug. When I set a max length in the textinput and type Pinyin in this input, the length constraint applies to the Pinyin rather than the final resulting Chinese characters.

[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.

[Kulbear]

I think this issue could potentially affect a lot of Chinese, Korean, Japanese users, or say non-alphabetic language users.

[kidmysoul]

Hey, when I update react native to version 0.54.0 ,this problem appears again ！？

liked there were lots of changes about textinput in ios in 0.54.0 and maybe that effects.

<TextInput style={styles.title} onChangeText={this.onTitleChange} maxLength={100} placeholder="例....." underlineColorAndroid={'transparent'} value={title}/>

this simple code above cannot even input a whole Japanese word in ios.

[jiangbophd]

so Big Issue!!!!!

[feng-zhang0712]

problem happened in react-native version 0.55.0

[gelove]

problem happened in react-native version 0.54.2

[feng-zhang0712]

@gelove Problem has been solved here #18456, the code has not been merged to newest version, so you have to modify your code manually https://github.com/facebook/react-native/pull/18456/files

[AKACC]

I took out value from Textinput and then the problem fixed. It seems every letter typed would trigger onChangeText and render again. Wish this can help.

[ankur-sardar]

Any Update on this issue? (exist in 0.55.4)

[lzxb]

I also have the same problem, the version is 0.55.4

[daskinnyman]

this problem still occurs in 55.3

[wujunchuan]

I have to use the onEndEditing callback to replace the onChange callback.
But it won't be excuted timely

<TextInput
  style={[ commonStyles.commonInput, commonStyles.pdl_normal, commonStyles.pdr_normal ]}
  underlineColorAndroid={'transparent'}
  // 中文支持问题， issues
  // https://github.com/facebook/react-native/issues/12599
  // value={this.state.remark}
  // onChangeText={( text ) => this.setState( { remark: text } )}
  // onChange={(evt) => this.setState({ remark: evt.nativeEvent.text })}
  // onChangeText={(text) => setTimeout(() => {this.setState({ remark: text })})}
  onEndEditing={(evt) => this.setState({ remark: evt.nativeEvent.text })}
  placeholder={I18n.t( Keys.eos_remark )}
  defaultValue={this.state.remark}
  autoCapitalize={'none'}/>

Notice:
sometimes onEndEditing callback will not trigger, because the Blur Event doesn't trigger.
So, It is not the best solution

[Taphood]

This problem still occurs in RN56.0 as well.

As AKACC mentioned if you remove "value" field from TextInput it seems to work even if you use maxlength and onChangeText for every letter typed.

Since it is pretty common to read a value stored in Redux store as below I wish this bug to be taken care for CJK letters input.

 <TextInput
    value={this.props.displayName}       // <--- remove this line
    label="some_text"
    onChangeText={val=> this.onChangeInput("displayName", val)}
    maxLength={8}
    placeholder="some_placeholder_text"
    autoCapitalize="none"
  /> 

[xuechinahb]

This bug has been fixed. https://github.com/facebook/react-native/pull/18456/files. I merge this code manually, it works well.

[hkung77]

Can I get some idea on when and/or which release will have the bug fix?

[kidmysoul]

@hkung77 maybe 0.57.0
and the 0.57.0-rc has already fixed this bug. you can use it too.

[elanpang]

This critical issue lived so long time even in 0.56.1, I can't understand.

[StevenMasini]

@elanpang this has been included in 0.57, see the changelogs

[elanpang]

@StevenMasini So luck :)

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.