[0.26.0-rc] autocorrect broken #7496
Comments
|
Did some investigation, and found this commit: Fix autocomplete in rich-text editing mode for CJK text input 91dcc9aI rolled these changes out of my build, but still looks like the same problems persist. Any suggestions? |
|
@sjmueller It looks like the 'setText:' method of RCTTextField is getting called twice, once with the old value then again with the new value. Having it set twice is what is causing the problem. |
|
Actually, it looks like the problem is this if statement |
|
@nicklockwood It seems to me that autocorrect could never work if the TextInput is a controlled component. Unfortunately I can't think of a nice way to fix this without having something return that the text change is valid and hence shouldn't call setNativeProps. Do you have any ideas which might help? |
|
@sjmueller I've created a PR which seems to fix the autocorrect on iOS (haven't tested the effects on Android yet). If you decide to try it out then let me know if this introduces any bug. |
|
This is a regression caused by a change to batch event handling in React Native: facebook/react@9f11f8c cc @spicyj |
|
Not at a computer, but you can look at a recent change I did to PickerAndroid to fix a similar issue. |
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.
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 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 #7676 Differential Revision: D3346221 Pulled By: nicklockwood fbshipit-source-id: 715df3e8a03aa58cb0a462de4add02289d42782f
|
@nicklockwood Should this issue be closed since you merged my PR? 26aa27d |
|
I can confirm the 26aa27d fix works for me as well. |
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
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
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. Fixes Skype4Life bug: https://skype.visualstudio.com/DefaultCollection/SCC/Skype4Life/_workitems?id=554823&triage=true&_a=edit Fixes React Native bug: facebook#7496
When setting up a
TextInputto keep in sync with state (as per documentation), autocorrect breaks. For example:It seems that the value of the native control is now getting overridden during every
onChangeTextevent that updates state, because even things like double space no longer results in a period.For reference, I'm also on
react 15.0.2The text was updated successfully, but these errors were encountered: