react-native: [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput
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
- write anythig in the textfield
- press clear
- 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: ''})
}
}
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 15
- Comments: 19 (5 by maintainers)
Commits related to this issue
- 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 conditio... — committed to facebook/react-native by hamaron 6 years ago
- 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 conditio... — committed to facebook/react-native by hamaron 6 years ago
- 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 conditio... — committed to macdoum1/react-native by hamaron 6 years ago
- 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 conditio... — committed to taptapsend/react-native by hamaron 6 years ago
- 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 conditio... — committed to expo/react-native by hamaron 6 years ago
- 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 conditio... — committed to discord/react-native by hamaron 6 years ago
- Fix issue when inserting text at 0 when maxLength is set Summary: 1. The user inserts a character ('0') at index 0. Because the range matches 0, 0, predictedText is set to that character that was ins... — committed to facebook/react-native by deleted user 6 years ago
- Fix issue when inserting text at 0 when maxLength is set Summary: 1. The user inserts a character ('0') at index 0. Because the range matches 0, 0, predictedText is set to that character that was ins... — committed to facebook/react-native by deleted user 6 years ago
- Remove _workQueue of webSocket set to NULL which may leads to crash Remove _workQueue of webSocket set to NULL which may leads to crash Remove _delegateDispatchQueue nil handler Sync stream event c... — committed to zhongwuzw/react-native by zhongwuzw 6 years ago
I was able to workaround this bug by adding a check in the
onKeyPresscallback function,I found while debugging that duration between receiving backspace event after key press is less than ~10ms. So I record the non-backspace key event timeStamp and use it to compare with backspace event timeStamp. If the difference between these two is less than 20ms (arbitrary value > 10ms) then I return from the callback. Hope this helps!
I opened a pull request to fix this bug: #18627
+1; I’ve got the same issue on 0.54.
Fix should be in
react-native@0.56.0-rc.2!Fixed.
Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?
Thank you for your contributions.