(Android) Incorrect key reported from TextInput onKeyPress event #18262
Description
There are cases where <TextInput /> onKeyPress() event report incorrect keys.
If you place your selection cursor at the start of the line and press enter, instead of receiving Enter key on key press event, you receive Backspace and e.
It only happen if you do this on the start of the line. If I move selection cursor to end of line and press enter, it function correctly.
Notice also how the order of events are different for happy case and edge case, which is related to #18221.
Environment
Environment:
OS: macOS High Sierra 10.13.3
Node: 9.2.0
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.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3
Expected Behavior
Report the correct key press, in my case, Enter.
Actual Behavior
It only happen if you do this at the start of the line. Instead of receiving Enter key on key press event, you will receive Backspace and e.
Steps to Reproduce
- Clone and run this repo https://github.com/lxcid/ReactNative-AndroidKeyPress
- Make sure you have an Android device attached for debugging.
react-native run-androidreact-native log-androidif you need to see the log yourself- Placing selection cursor at start of line
- Press enter several times
Output (comments describe the user input event)
03-08 11:59:00.891 21082 23563 I ReactNativeJS: Running application "AndroidKeyPress" with appParams: {"rootTag":31}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
03-08 11:59:03.853 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 80, end: 80 }
# Placing selection cursor at start of line
03-08 11:59:06.413 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 0, end: 0 }
# Press Enter
03-08 11:59:07.888 21082 23563 I ReactNativeJS: 'onKeyPress', 'Backspace'
03-08 11:59:07.895 21082 23563 I ReactNativeJS: 'onChangeText', '\nDouble tap R on your keyboard to reload,\nShake or press menu button for dev menu'
03-08 11:59:07.913 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 7, end: 7 }
03-08 11:59:07.915 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 1, end: 1 }
# Press Enter again
03-08 11:59:07.915 21082 23563 I ReactNativeJS: 'onKeyPress', 'e'
03-08 11:59:08.964 21082 23563 I ReactNativeJS: 'onKeyPress', 'Backspace'
03-08 11:59:08.969 21082 23563 I ReactNativeJS: 'onChangeText', '\n\n tap R on your keyboard to reload,\nShake or press menu button for dev menu'
03-08 11:59:08.983 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 2, end: 2 }
03-08 11:59:08.989 21082 23563 I ReactNativeJS: 'onChangeText', '\n\nDouble tap R on your keyboard to reload,\nShake or press menu button for dev menu'
03-08 11:59:09.001 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 2, end: 2 }
# Press Enter yet again
03-08 11:59:09.002 21082 23563 I ReactNativeJS: 'onKeyPress', 'e'
03-08 11:59:09.737 21082 23563 I ReactNativeJS: 'onKeyPress', 'Backspace'
03-08 11:59:09.741 21082 23563 I ReactNativeJS: 'onChangeText', '\n\n\nDouble tap R on your keyboard to reload,\nShake or press menu button for dev menu'
03-08 11:59:09.754 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 3, end: 3 }
03-08 11:59:09.755 21082 23563 I ReactNativeJS: 'onKeyPress', 'e'
# Move selection cursor to the end
03-08 12:11:31.936 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 83, end: 83 }
# Press Enter
03-08 12:11:32.998 21082 23563 I ReactNativeJS: 'onChangeText', '\n\n\nDouble tap R on your keyboard to reload,\nShake or press menu button for dev menu\n'
03-08 12:11:33.024 21082 23563 I ReactNativeJS: 'onSelectionChange', { start: 84, end: 84 }
03-08 12:11:33.025 21082 23563 I ReactNativeJS: 'onKeyPress', 'Enter'