Repository navigation
[0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374
Description
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: ''})
}
}Reacted by avocadowastaken, Petr Bela, Ahmet Ardal, Arkadiusz Konior, Vinh Thai, Richard, Keni Kastinen, Matt Dupree, Ahmed Tarek, kirsantov and 5 more
Activity
johnckendall commentedon Mar 21, 2018
+1, validated this is happening
edo1493 commentedon Mar 23, 2018
+1
choiRyan commentedon Mar 24, 2018
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 commentedon Mar 28, 2018
+1; I've got the same issue on 0.54.
barsumek commentedon Mar 28, 2018
+1, encountered when using https://github.com/jwohlfert23/react-native-tag-input
hamaron commentedon Mar 30, 2018
I opened a pull request to fix this bug: #18627
kpatt1011 commentedon May 2, 2018
+1 to this happening in our app where we are validating a Confirmation Code.
When can we get #18627 merged in?
kayzenkayzen commentedon May 3, 2018
+1
imyagnesh commentedon May 3, 2018
+1 having same issue
chlorophant commentedon May 3, 2018
+1
6 remaining items
amarw commentedon May 18, 2018
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!
iOS: Fixed the bug where a Backspace event was emitted when entering …
iOS: Fixed the bug where a Backspace event was emitted when entering …
hramos commentedon Jun 15, 2018
Fixed.
Ashoat commentedon Jun 15, 2018
Fix should be in
react-native@0.56.0-rc.2!iOS: Fixed the bug where a Backspace event was emitted when entering …
iOS: Fixed the bug where a Backspace event was emitted when entering …
iOS: Fixed the bug where a Backspace event was emitted when entering …
michaelkowalski commentedon Oct 12, 2018
@amarw
If for same reason we have to work without upgrading react native version, it's event better to check nativeEvent.eventCount (at least in 0.55.2), they are the same in the two events :)
Fix issue when inserting text at 0 when maxLength is set
Fix issue when inserting text at 0 when maxLength is set