Skip to content

Controlled TextInput component breaks Pinyin autocompletion in v0.26.0 #8265

@bnham

Description

@bnham

There is a regression in React Native v0.26.0. Specifically, a simple controlled TextInput component (both single and multiline) like this:

var ControlledTextInput = React.createClass({
  getInitialState: function() {
    return {value: ''};
  },
  _onChangeText: function(text) {
    this.setState({value: text});
  },
  render: function() {
    return <TextInput
      value={this.state.value}
      style={styles.default}
      onChangeText={this._onChangeText.bind(this)}
      {...this.props}
      />;
  }
});

breaks the Chinese Pinyin keyboard's autocompletion feature. For instance, after typing the "n" here, the keyboard should offer an autocompletion to "你", but instead the keyboard offers an autocompletion to ",":

pinyin_autocompletion

I bisected and traced this regression down to 9be37ca, which is the commit that updated us to using react 15.0.2-alpha.2.

The reason for the breakage is that after the problematic diff, -[RCTTextView setText:] gets called twice for every keypress: once with the old text and once with the new text with the new character appended. By calling setText: with the old text, we end up calling -[UITextView setText:], which clears the marked autocompletion state of the text view and breaks multi-character autocomplete keyboards like Chinese Pinyin.

See #8140 for a PR that tries to work around this issue. I'm going to close that PR for now and work on trying to fix the regression rather than applying a workaround.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions