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:
hamaron 2018-06-14 18:06:05 -07:00 committed by Facebook Github Bot
parent 8200c98029
commit 1ffb2b63be
1 changed files with 6 additions and 1 deletions

View File

@ -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;