Skip to content

Commit

Permalink
Fix TextInput autocorrect (facebook#7496)
Browse files Browse the repository at this point in the history
TextInput autocorrect was broken by a change to batch event handling in React Native:
facebook/react@9f11f8c

This fix uses the same approach as
facebook@0cd2904

The problem is that TextInput's _onChange handler relied on this.props.value
being updated synchronously when calling this.props.onChangeText(text). However,
this assumption was broken when React Native event handling started being batched.

The fix is to move the code that relies on this.props.value being up-to-date to
componentDidUpdate.
  • Loading branch information
Adam Comella committed May 22, 2016
1 parent 75d538e commit a801020
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -368,6 +368,7 @@ var TextInput = React.createClass({
_focusSubscription: (undefined: ?Function),

componentDidMount: function() {
this._lastNativeText = this.props.value;
if (!this.context.focusEmitter) {
if (this.props.autoFocus) {
this.requestAnimationFrame(this.focus);
Expand Down Expand Up @@ -613,10 +614,15 @@ var TextInput = React.createClass({
return;
}

this._lastNativeText = text;
this.forceUpdate();
},

componentDidUpdate: function () {
// This is necessary in case native updates the text and JS decides
// that the update should be ignored and we should stick with the value
// that we have in JS.
if (text !== this.props.value && typeof this.props.value === 'string') {
if (this._lastNativeText !== this.props.value && typeof this.props.value === 'string') {
this.refs.input.setNativeProps({
text: this.props.value,
});
Expand Down

0 comments on commit a801020

Please sign in to comment.