iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string (#18627)
Summary: The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`. <!-- Required: Write your motivation here. If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged. --> 1. Pass all the tests by `yarn run test` 2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text and entering any letters. ```javascript type Props = {}; type State = { text: string, keys: string }; export default class App extends Component<Props, State> { state = {text: '', keys: ''} render() { return ( <View style={styles.container}> <TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/> <Button title="Clear" onPress={this.onClear}/> <Text>Text: {this.state.text}</Text> <Text>Keys: {this.state.keys}</Text> </View> ); } onChangeText = (text: string) => { this.setState({text}) } onKeyPress = ({ nativeEvent }: Object) => { this.setState({keys: this.state.keys + nativeEvent.key + ', '}) } onClear = () => { this.setState({text: '', keys: ''}) } } ``` <!-- Does this PR require a documentation change? Create a PR at https://github.com/facebook/react-native-website and add a link to it here. --> <!-- Required. Help reviewers and the release process by writing your own release notes. See below for an example. --> [IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string <!-- **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [ {Component} ] [ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> Closes https://github.com/facebook/react-native/pull/18627 Differential Revision: D8436331 Pulled By: hramos fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
This commit is contained in:
parent
8200c98029
commit
1ffb2b63be
|
@ -306,7 +306,12 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
|
|||
|
||||
NSString *previousText = [_predictedText substringWithRange:range] ?: @"";
|
||||
|
||||
if (_predictedText) {
|
||||
// After clearing the text by replacing it with an empty string, `_predictedText`
|
||||
// still preserves the deleted text.
|
||||
// As the first character in the TextInput always comes with the range value (0, 0),
|
||||
// we should check the range value in order to avoid appending a character to the deleted string
|
||||
// (which caused the issue #18374)
|
||||
if (!NSEqualRanges(range, NSMakeRange(0, 0)) && _predictedText) {
|
||||
_predictedText = [_predictedText stringByReplacingCharactersInRange:range withString:text];
|
||||
} else {
|
||||
_predictedText = text;
|
||||
|
|
Loading…
Reference in New Issue