[0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput

[michalpetrov]

In IOS, after clearing TextInput value (setting it to empty string) and then pressing any key (e.g. 'a') two onKeyPress events are fired: A, Backspace. First is for the pressed key and second is a Backspace.

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.9.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.2 => 0.54.2

Expected Behavior

Only one event for the pressed key should be fired (e. g. 'A').

Actual Behavior

An additional 'Backspace' event is fired.

Steps to Reproduce

1. write anythig in the textfield
2. press clear
3. press 'a' >>> events 'A' and 'Backspace' will be fired

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: ''})
 }
}

[johnckendall]

+1, validated this is happening

[edo1493]

+1

[choiRyan]

I also encountered this. It causes react-native-tag-input@0.0.18 to not work properly. (Used the example code in the repo for replication) https://github.com/jwohlfert23/react-native-tag-input

[hamaron]

+1; I've got the same issue on 0.54.

[barsumek]

+1, encountered when using https://github.com/jwohlfert23/react-native-tag-input

[hamaron]

I opened a pull request to fix this bug: #18627