React-native: [Android] onKeyPress event not fired for numeric keyboard

[JasperVercammen]

Environment

OS: macOS High Sierra 10.13.4
Node: 8.9.4
Yarn: 1.6.0
npm: 6.0.1
Watchman: 4.7.0
Xcode: Xcode 9.3.1 Build version 9E501
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.55.0 => 0.55.0

Description

When using the non-default keyboard on Android, the onKeyPress event is not (or partly) fired.
For example, when using the numeric keyboard, pressing a number does not fire the event, but pressing the backspace does fire the event.
It works fine for the default keyboard, or on iOS

Steps to Reproduce

Issue can be seen with this snack: https://snack.expo.io/B1amtl3ym
Steps to reproduce:

• Add a TextInput
• Attach the onKeyPress event
• Put the keyboardType on numeric
• Log when you come into the onKeyPress callback

Expected Behavior

Call the onKeyPress callback when a key is pressed on the not default keyboard on android

Actual Behavior

onKeyPress callback is NOT called for a numeric keyboard. (for the digits)

[react-native-bot]

It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

[joshjhargreaves]

Let me take a look.

[taxidermic]

Any updates? This issue is still present withreact-native: sdk-28.0.1.tar.gz.
Maybe you need any additional info?

[pepf]

The problem is still there using:

react-native-cli: 2.0.1
react-native: 0.56.0

Going top left to bottom right on all keys gives me the following output:

{key: "-"}
{key: " "} 
{key: "Backspace"}
{key: ","}
{key: "."}

Note: The enter key also doesn't work ( I was actually hoping to do something onSubmit, suggestions welcome ;) )

[ericjames]

For the latest React Native, in a TextInput, typing numbers does not fire oKeyPress for Android 6.0 and below. All letters and symbols do work. Does not affect onChangeText

Android 7.0 has been working fine for me.

Environment:
OS: macOS High Sierra 10.13.6
Node: 7.10.0
Yarn: Not Found
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: Not Found
Using Genymotion 2.12.2 Samsung Galaxy 6.0.0 API 23

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz => 0.55.4

[charleston10]

I also have the same problem

[neonsec]

Any update on this issue? @joshjhargreaves

[poppiestar]

Hi, I'm having the same problem with numeric keyboards not firing the onKeyPress event, which prevents my custom component from working in Android.

info
React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
Memory: 80.05 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.11.0 - ~/.nvm/versions/node/v11.11.0/bin/node
npm: 6.9.0 - ~/.nvm/versions/node/v11.11.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 26, 28
Build Tools: 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5314842
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.5 => 0.59.5
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-create-bridge: 2.0.1

[cloverich]

Related: https://github.com/facebook/react-native/issues/18339

[sarykemmoun]

No solution yet?

[AhmadRaza786]

Still facing the same issue even on the latest version 0.59

[mieszko4]

I am facing it with rn 0.59.10
I still did not upgrade to rn 0.60

[siddhi-sandy]

There is a workaround you can use.

onChangeText={value => {
 if (this.checkNumber(value) == 1) {
//do the magic
}
}}

checkNumber is defined as:

checkNumber = num => {
    switch (num) {
      case "0":
        return 1;
        break;
      case "1":
        return 1;
        break;
      case "2":
        return 1;
        break;
      case "3":
        return 1;
        break;
      case "4":
        return 1;
        break;
      case "5":
        return 1;
        break;
      case "6":
        return 1;
        break;
      case "7":
        return 1;
        break;
      case "8":
        return 1;
        break;
      case "9":
        return 1;
        break;
      default:
        return 0;
        break;
    }
  };

[mieszko4]

@siddhi-sandy Unfortunately this works only if text did change. I need it for case when text stays the same and I press a key.
For example, I have TextInput limited to one character with content A. When I focus this input my text is selected. When I press A I want it jump to next TextInput - but with this bug there is no way to detect that key was pressed with onChangeText

[blohamen]

+1 issue still persist rn 0.60.4

[edipkavvas]

Any workaround or solution???

[fawazahmed-makeen]

Here's a workaround for taking a single digit input, for multiple maybe you can set onChangeText to return last char of text:

const [hasKeySupport, setHasKeySupport] = useState(Platform.OS === 'ios');

const onKeyReallyPressed= (key) => {
   // do something
};

const onChangeText = (text) => {
  if (Platform.OS === 'ios') return;
  if (!hasKeySupport) onKeyReallyPressed(text);
};

const onKeyPressInput = ({ nativeEvent: { key } }) => {
  onKeyReallyPressed(key);
  if (Platform.OS === 'ios') return;
  if(!hasKeySupport && !isNaN(key)) setHasKeySupport(true);
}

// text input
<TextInput
  maxLength={1}
  keyboardType={Platform.select({ ios: 'number-pad', android: 'numeric' })}
  onChangeText={onChangeText}
  onKeyPress={onKeyPressInput}
/>

[clamiax]

Same issue here, onKeyPress don't get fired with numbers on any keyboardType. I only tested on Android with RN 0.61.2. No workaround found yet except using onChangeText and eventually restore the previous value after a check. Though you can see the wrong character to be inserted and then removed from the input (which is horrible to me).

[ferrannp]

From here:

https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditTextInputConnectionWrapper.java#L132-L136

It seems we are only firing it when we click Backspace or Enter. I am not really sure why though. Maybe @makovkastar or @joshjhargreaves, do you remember about it? :)

[santiagobts]

So? I'm still having this issue, RN 0.59. Not event fired when numeric keyboard.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[MrLoh]

this is simply an unsolved bug and should remain in the backlog.

[fabriziobertoglio1987]

I disagree @MrLoh as I published a pull request https://github.com/facebook/react-native/pull/29046 to solve this so please test it and give a review. Thanks

[suberbawer]

@fabriziobertoglio1987 thx!, i saw your commit, i'll test it and let you know. We can close this issue.

[fabriziobertoglio1987]

@suberbawer thanks here a guide to build from source https://github.com/facebook/react-native/wiki/Building-from-source#publish-your-own-version-of-react-native

if you have issues ask, I will assist you as I can. Biggest Step is installing ndk, but it was pretty easy for me using android studio depencies manager/updater

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[clamiax]

The bug is unsolved and should stay opened.

[ttlong3103]

@mieszko4 Any solution for your issue?

[mieszko4]

Nope, it works for me only if the entered character is different form the value of the input.
When it is different I can detect that with onChangeText and do some work (in my case I focus the next text input if it is not empty value (which would mean backspace clicked).
If it is the same onChangeText does not trigger.

I haven't touch this since then. Working good enough for my case.