Skip to content

Commit

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

For example, a TextInput like this would be affected by this bug:

```javascript
<TextInput
  autoCorrect={true}
  style={{height: 26, width: 100}}
  onChangeText={(text) => this.setState({ text })}
  value={this.state.text}
/>
```
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.

**Test plan (required)**

Tested autocorrect now works on iOS in a small app and a large app. Also tested t
Closes facebook#7676

Differential Revision: D3346221

Pulled By: nicklockwood

fbshipit-source-id: 715df3e8a03aa58cb0a462de4add02289d42782f
  • Loading branch information
Adam Comella authored and Morgan Pretty committed Aug 24, 2016
1 parent 71ccbcb commit 1fcd1f8
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -366,8 +366,10 @@ var TextInput = React.createClass({
},

_focusSubscription: (undefined: ?Function),
_lastNativeText: (undefined: ?string),

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 +615,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 1fcd1f8

Please sign in to comment.