status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-04 21:53:30 +00:00
Code Issues Projects Releases Wiki Activity

Fix TextInput autocorrect (#7496)

Browse Source 
Summary:
Autocorrect was broken for controlled TextInput components by a change to batch event handling in React Native:
9f11f8c263

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
0cd2904b23

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 https://github.com/facebook/react-native/pull/7676

Differential Revision: D3346221

Pulled By: nicklockwood

fbshipit-source-id: 715df3e8a03aa58cb0a462de4add02289d42782f
This commit is contained in:
Adam Comella 2016-05-26 07:20:50 -07:00 committed by Facebook Github Bot 6
parent 0bbfe79623
commit 26aa27da63
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Libraries/Components/TextInput/TextInput.js
View File

@ -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);
@ -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,
});