[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 with react-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: #18339

[sarykemmoun]

No solution yet?

[ahmadraza-gh]

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

[ghost]

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???

[fabOnReact]

I disagree @MrLoh as I published a pull request #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.

[fabOnReact]

@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]

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.

[bitsmanent]

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.

[iagormoraes]

I made it work with both onChange and onKeyPress, on handler I'm checking the platform then getting the property key for iOS and text for Android, but if the field is filled the listener don't get called.

[fabOnReact]

@iagormoraes requires changes in ReactAndroid as in my pr #29046
but it will not be enought using patch-package https://github.com/facebook/react-native/wiki/Building-from-source#publish-your-own-version-of-react-native

[victorlmtavares]

Having the same issue here. Trying to build a 2FA which the best UX is to, whenever a new character is pressed, it fills the next input field. However, without onKeyPress checking for numbers pressed on Android, I can`t get it done properly. Has anyone done it by any chance?

[vadimb]

@victorlmtavares @fabriziobertoglio1987's PR #29046 has a fix for it. Hopefully it land soon. Else you can build it yourself but who got time for that :)

If you could add a thumbs up there it will be great.

[jailsonpaca]

same problem here

[kartikeyvaish]

This problem is still there.

[Adaverse]

Problem still exists

[kartikeyvaish]

Yes, it still exists.💔

[kivohin]

Yes, its still exists.💔

Correct, the issue is still there, i.e. on Android 11.0 and using Expo SDK 42 (React Native 0.63), when using on the keyboardType prop one of these values below the onChangeText or onKeyPress callbacks are NOT called when typing in numbers (1, 2, 3...):

• number-pad
• decimal-pad
• numeric
• phone-pad

However when using the keyboardType prop with value default, then when typing in some numbers it works fine.

It seems the issue was technically fixed in this PR, so not sure if a regression happened at some point:
#29046

Can we get any help, or workaround on this?
Thank you.

[kivohin]

Yes, its still exists.💔

Correct, the issue is still there, i.e. on Android 11.0 and using Expo SDK 42 (React Native 0.63), when using on the keyboardType prop one of these values below the onChangeText or onKeyPress callbacks are NOT called when typing in numbers (1, 2, 3...):

• number-pad
• decimal-pad
• numeric
• phone-pad

However when using the keyboardType prop with value default, then when typing in some numbers it works fine.

It seems the issue was technically fixed in this PR, so not sure if a regression happened at some point: #29046

Can we get any help, or workaround on this? Thank you.

Ignore my above comment, it actually does work correctly, sorry for the noise.

My issue was when combining React.useRef() with this <TextInput /> on Android, and some other extra logic.

[kenshinman]

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.

This Issue has still not been fixed :(

[caner-karaman]

Hi,

react-native: 0.65.1

I use TextInput component with keyboardType: 'num-pad',
onKeyPress method is not fired. If I change keyboardType to default, it works very well

[joaohd98]

Same error here!

[huyhai]

same

[Bad-Listener]

still exists

[Bad-Listener]

but seems to work if you just implement onChangeText property with an empty arrow function, then onKeyPress will be fired for Android everytime!

[Matiassimone]

Still persists,
on "react-native": "0.68.2".

Using this TextInput with the follow props and keyboardType="number-pad",
the numbers only trigger in the onKeyPress,
onChangeText or onChange callbacks are NOT called when press numbers (1, 2, 3...).

      <TextInput
        autoFocus
        caretHidden
        contextMenuHidden
        onKeyPress={onKeyPress}
        ref={phoneRef}
        maxLength={6}
        autoCorrect={false}
        onChange={onChange}
        onChangeText={onChangeText}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        autoComplete="sms-otp"
        keyboardAppearance={isDarkMode ? 'dark' : 'light'}
        style={styles.nativeKeyboardHidden}
      />

[kotano]

Guys, I had this problem, but it got resolved after I removed display:none from TextInput style.

[buraky84]

"react-native": "0.71.3"

onChangeText => not triggering on Android with numeric keyboard.

onChange => callback works for me both on Android and IOS with numeric keyboard!

[mayander30]

Any fix?