(Android) Incorrect key reported from TextInput onKeyPress event

[lxcid]

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-android
• react-native log-android if 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'

[joshjhargreaves]

Thank you for reporting this, as I'm sure you know, this is a new feature on Android & it's a hard thing to get right on the first attempt!
Can you find any other cases where the output is inconsistent between iOS & Android?

I'll have to think about the event order inconsistency separately as there's more implementation dependent on either platform.

[lxcid]

I'll be sure to report more if I find them! 👍 Thanks for the reply!

[lamnguyen2307]

@joshyhargreaves
I face the same issue with onKeyPress on android.
onKeyPress can trigger key event properly if the keyboardType="default",
otherwise, when I use the "numeric" keyboardType, onKeyPress cannot trigger the number key events.
It only works with backspace, dot, comma, key events.

Could anyone help with this issue?

Here is my react-native info:

Environment:
OS: macOS High Sierra 10.13.4
Node: 8.11.1
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.1 AI-173.4697961

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

[morenoh149]

@joshyhargreaves you say

I'll have to think about the event order inconsistency separately as there's more implementation dependent on either platform.

Does that mean the bug is likely in the c++ code? looking into this.

[omeryounus]

Yess, I believe its because native compiler

[grabbou]

This issue has been open and reproduced on a really old version of React Native. We have contributed a lot of improvements to TextInput on Android since then.

I am going to close it hoping it doesn't happen anymore. In case it does happen on 0.59, please let me know and let's reopen.