From a8010205e2ec6038bb70c76147d02cb1765f512c Mon Sep 17 00:00:00 2001 From: Adam Comella Date: Sat, 21 May 2016 17:48:01 -0700 Subject: [PATCH] Fix TextInput autocorrect (#7496) TextInput autocorrect was broken by a change to batch event handling in React Native: https://github.com/facebook/react/commit/9f11f8c2634921e657df2691e6bfda18fead5bcc This fix uses the same approach as https://github.com/facebook/react-native/commit/0cd2904b235f53ed684bb9898280461e2cee0b5b 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. --- Libraries/Components/TextInput/TextInput.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index bbb665f60d4106..bba47654d5c026 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -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); @@ -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, });