Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TextInput] Get keydown event to handle "Enter" #1882

Closed
JonasJonny opened this issue Jul 6, 2015 · 41 comments
Closed

[TextInput] Get keydown event to handle "Enter" #1882

JonasJonny opened this issue Jul 6, 2015 · 41 comments
Labels
Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@JonasJonny
Copy link

Hello.
I tried to catch keydown/keypress events for several hours with no luck.
I can get whole .text string (onChange={}) but what if I need to do an action when "Enter/Backspace" are pressed?
Is there any solution how to know which keyboard character was just pressed in TextInput keyboard?

Thank you.
@chirag04
Copy link
Contributor

chirag04 commented Jul 6, 2015

Not sure if controlled={true} can help you here.

@JonasJonny
Copy link
Author

No luck with controlled={true} but thank you @chirag04.
Attributes onKeyDown/Up/Pressed didn't work but I know they are not supported.
Event for onChange have just target, text, timestamp :(.

@brentvatne
Copy link
Collaborator

I would like to see onKey* implemented, @sahrens do you have any suggestions for where to get started on implementing this? Maybe @JonasJonny or another interested contributor would be able to take that and turn it into a PR

@JonasJonny
Copy link
Author

Unfortunately I don't have enough skill to help.

@brentvatne brentvatne added the Good first issue Interested in collaborating? Take a stab at fixing one of these issues. label Jul 8, 2015
@grabbou
Copy link
Contributor

grabbou commented Jul 21, 2015

@brentvatne I think the way you emit events for your video component should work quite nicely in this case. The only thing is whether we want to wrap them like you and return event or return plain event.nativeEvent - not sure how it's handled in other cases as it should be consistent across the library.

@dsibiski
Copy link
Contributor

@JonasJonny I have a working implementation of onKeyPress that successfully detects return and delete.

Right now it is returning the character of the key that was pressed and for return and delete, it's returning ASCII codes CR and DEL respectively.

Would this take care of your use case? @brentvatne any other ideas as to how the return and delete codes should be returned to JS? Would it be better to use ASCII code numbers?

I'd like to figure these things out before submitting a PR.

@dsibiski
Copy link
Contributor

Ah, it looks like there really isn't a delete key in iOS, it's more like a backspace, so it should send back BS or 08

@JonasJonny
Copy link
Author

Thank you @dsibiski for following. I really appreciate that.

In my opinion you should return "keyCode" http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

@brentvatne
Copy link
Collaborator

Agreed with @JonasJonny - I think we should emulate the modern browser version of this though, rather than keyCode: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key - so it would return {key: "Backspace"} and some other properties too (probably for now we can just do key and implement others on a per-use-case basis)

@dsibiski
Copy link
Contributor

Thanks for the feedback guys! I pretty much have this ready for a PR, I'll make these changes and you guys can review it and see what you think...

This was referenced Jul 21, 2015
Closed
Closed
@browniefed
Copy link
Contributor

@brentvatne not sure how you want to handle issues w/ pending PRs.

@grabbou
Copy link
Contributor

grabbou commented Sep 13, 2015

PR submitted label would've been handy when scrolling through the issues to pick one to work on.

@brentvatne
Copy link
Collaborator

@browniefed - yeah it's a little awkward, maybe PR submitted tag would be good but that might be hard to keep up to date unless it's added automatically

@ide
Copy link
Contributor

ide commented Sep 14, 2015

GitHub should build this if there isn't already a way to write this query.

@browniefed
Copy link
Contributor

@ide +1 ... oh wait they haven't built a voting system yet ... not holding my breath.

@GantMan
Copy link
Contributor

GantMan commented Oct 27, 2015

Anything I can do to help this task along? Pretty essential to native apps I believe.

ghost pushed a commit that referenced this issue Nov 2, 2015
@dsibiski
Implements onKeyPress
6c7c845 
Summary: - When a key is pressed, it's `key value` is passed as an argument to the callback handler.
 - For `Enter` and `Backspace` keys, I'm using their `key value` as defined [here](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Key_values). As per JonasJonny & brentvatne's [suggestion](#1882 (comment)).

- Example
```javascript
 _handleKeyPress: function(e) {
      console.log(e.nativeEvent.key);
  },

  render: function() {
    return (
      <View style={styles.container}>
        <TextInput
            style={{width: 150, height: 25, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
        />
        <TextInput
            style={{width: 150, height: 100, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
            multiline={true}
        />
      </View>
    );
  }
```
- Implements [shouldChangeCharactersInRange](https://developer.apple.com/library/prerelease/ios/documentat
Closes #2082

Reviewed By: javache

Differential Revision: D2280460

Pulled By: nicklockwood

fb-gh-sync-id: 1f824f80649043dc2520c089e2531d428d799405
@dsibiski
Copy link
Contributor

dsibiski commented Nov 4, 2015

@brentvatne We can close this now as my PR for onKeyPress has been merged to master.

@brentvatne
Copy link
Collaborator

Awesome 😄

MattFoley pushed a commit to skillz/react-native that referenced this issue Nov 9, 2015
@dsibiski
Implements onKeyPress
8ec336e 
Summary: - When a key is pressed, it's `key value` is passed as an argument to the callback handler.
 - For `Enter` and `Backspace` keys, I'm using their `key value` as defined [here](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Key_values). As per JonasJonny & brentvatne's [suggestion](facebook#1882 (comment)).

- Example
```javascript
 _handleKeyPress: function(e) {
      console.log(e.nativeEvent.key);
  },

  render: function() {
    return (
      <View style={styles.container}>
        <TextInput
            style={{width: 150, height: 25, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
        />
        <TextInput
            style={{width: 150, height: 100, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
            multiline={true}
        />
      </View>
    );
  }
```
- Implements [shouldChangeCharactersInRange](https://developer.apple.com/library/prerelease/ios/documentat
Closes facebook#2082

Reviewed By: javache

Differential Revision: D2280460

Pulled By: nicklockwood

fb-gh-sync-id: 1f824f80649043dc2520c089e2531d428d799405
Crash-- pushed a commit to Crash--/react-native that referenced this issue Dec 24, 2015
@dsibiski @Crash--
Implements onKeyPress
0a15336 
Summary: - When a key is pressed, it's `key value` is passed as an argument to the callback handler.
 - For `Enter` and `Backspace` keys, I'm using their `key value` as defined [here](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Key_values). As per JonasJonny & brentvatne's [suggestion](facebook#1882 (comment)).

- Example
```javascript
 _handleKeyPress: function(e) {
      console.log(e.nativeEvent.key);
  },

  render: function() {
    return (
      <View style={styles.container}>
        <TextInput
            style={{width: 150, height: 25, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
        />
        <TextInput
            style={{width: 150, height: 100, borderWidth: 0.5}}
            onKeyPress={this._handleKeyPress}
            multiline={true}
        />
      </View>
    );
  }
```
- Implements [shouldChangeCharactersInRange](https://developer.apple.com/library/prerelease/ios/documentat
Closes facebook#2082

Reviewed By: javache

Differential Revision: D2280460

Pulled By: nicklockwood

fb-gh-sync-id: 1f824f80649043dc2520c089e2531d428d799405
@yfsx
Copy link

yfsx commented Mar 2, 2016

what about android? is onKeyPress worked on android version? because it's not possible to make 2 versions of code only for "enter clicked".

@brentvatne
Copy link
Collaborator

cc @dsibiski ^

@Abhay-Joshi-Git
Copy link

Abhay-Joshi-Git commented Jun 3, 2016 •
edited
Loading

Does Android version has support for onKeyPress ? Documentation suggests otherwise also I just tried and it's not working with version 0.26.2, but I just wanted to get this confirmed.
Also, it would be great if anyone can estimate about when we would be able to see that if it's not already there.

@dsibiski
Copy link
Contributor

dsibiski commented Jun 4, 2016

@yfsx @Abhay-Joshi-Git: No, it hasn't yet been implemented for Android. If either of you want to give it a shot that would be awesome 👍

@satya164 satya164 reopened this Jun 4, 2016
@santhosh77h
Copy link

Any update for android.OnKeyPress

@uncle-T0ny
Copy link

What the problem with #2082 ?

@joshjhargreaves
Copy link
Contributor

Heads up: I'm taking a look at doing this on Android.

@joshjhargreaves
Copy link
Contributor

joshjhargreaves commented Nov 27, 2016 •
edited
Loading

Does anyone have any thoughts on the best way to approach this in terms of detecting the keypresses on ReactEditText? It seems that there might be a few approaches.

TextWatcher
The least desirable approach would be use the TextWatcher interface to determine the key press based on a the difference between the oldText and the newText, here for example. However this really doesn't seem feasible, due to numerous reasons; difficulty detecting backspaces on empty text views for one?

KeyListener
In ReactEditText we are using an internal KeyListener, which perhaps could be a place where we could capture the keypress here? However the relevant onKeyDown/onKeyUpMethods methods only seem to fire when the keyboard type is not of type TYPE_CLASS_TEXT; i.e. only when the keyboard is numeric, for example. Any ideas as to why this might be, I'm guessing there's no need internally to call the KeyListener if the set input type is of type text?

InputConnectionWrapper
Another approach seems to be extending the InputConnectionWrapper class and capturing the keypresses that way, for example as per here. I tried this out here, but experienced the same behaviour as the KeyListener; the events were only firing if the keyboard shown was not the default/not of class TEXT.

@janicduplessis I'm not sure if you can offer any insight :)?

edit: It's nothing to do with the keyboard type being shown, it's to do with the keys themselves. onKeyDown/onKeyUp are only firing if the characters being pressed themselves are numeric.
edit: The KeyListener and InputConnectionWrapper onKeyDown/onKeyUp events seem to fire 100% if the keypad is numeric & numeric values are typed, however intermittently when typing numeric values in other text fields in the UIExplorer app.
edit: Hardware keypresses from hardware mac keyboard cause the events to fire every time, but soft keys on the emulator do not.

edit: Looks like I was completely wrong and you actually do need to do this with TextWatcher and potentially have some special cases for Tab, Return etc. Backspace (detected by InternalInputWrapper).

@alwx alwx mentioned this issue Dec 22, 2016
Closed
@GuillaumeMunsch
Copy link

Hi !

Any news on this ?

@vance-liu
Copy link

Hi ! e~~~
Any news on this ~~~?

@andela-landia
Copy link

Hi, you can use onSubmitEditing prop on the TextInput to submit on Enter. This works for iOS and Android.

@hkung77
Copy link

hkung77 commented Jun 15, 2017

onSubmitEditing works great for Enter but how about listening for other input events like backspace?

@joshjhargreaves joshjhargreaves mentioned this issue Jun 25, 2017
Closed
@joshjhargreaves
Copy link
Contributor

joshjhargreaves commented Jun 25, 2017 •
edited
Loading

Hey everyone,
I created a PR for onKeyPress on Android: thoughts and comments much appreciated :).
#14720
onkeypressandroid
The PR itself has a fairly extensive comment on implementation details.

@hkung77 : handles your backspace.

@semiautomatix
Copy link

@joshyhargreaves very excited for this PR - however I've changed my entire project to work around this shortcoming already.

@GuillaumeMunsch
Copy link

Looking forward to see this in RN next version as well ! :)

@joshjhargreaves
Copy link
Contributor

So a bit of an update on the PR.

the tl:dr is that there are some limitations to the native APIs that stop us being able to have a completely 'flawless' onKeyPress API, but I reason that we don't need it to be a completely 'flawless ''onKeyPress' implementation, as implementing such a thing is something we cannot do natively. What we need to do is expose native functionality to JS that users currently don't have on Android, like detecting backspaces where no text changes, and distinguishing between text changes from keyboards and cut/paste. These are things we can do, and I'll update the PR to support these cases and bring the API functionality as close to the iOS API as possible.

#14720 (comment)

@Ashoat Ashoat mentioned this issue Sep 18, 2017
Closed
@react-native-bot
Copy link
Collaborator

@facebook-github-bot icebox

@facebook-github-bot
Copy link
Contributor

@react-native-bot tells me to close this issue because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

- Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
- If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
- Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@facebook-github-bot facebook-github-bot added the Ran Commands One of our bots successfully processed a command. label Oct 12, 2017
facebook-github-bot pushed a commit that referenced this issue Jan 4, 2018
@joshjhargreaves @facebook-github-bot
Implement onKeyPress Android
c9ff0bc 
Summary:
This implements onKeyPress for Android on TextInputs and addresses #1882.
**N.B. that this PR has not yet addressed hardware keyboard inputs**, but doing will be fairly trivial. The main challenge was doing this for soft keyboard inputs.

I've tried to match the style as much as I could. Will happily make any suggested edits be they architectural or stylistic design (edit: and of course implementation), but hopefully this is a good first pass :).
I think important to test this on the most popular keyboard types; maybe different languages too.
I have not yet added tests to test implementation, but will be happy to do that also.

- Build & run RNTester project for Android and open TextInput.
- Enter keys into 'event handling' TextInput.
- Verify that keys you enter appear in onKeyPress below the text input
- Test with autocorrect off, on same input and validate that results are the same.

Below is a gif of PR in action.
![onkeypressandroid](https://user-images.githubusercontent.com/1807207/27512892-3f95c098-5949-11e7-9364-3ce9437f7bb9.gif)
Closes #14720

Differential Revision: D6661592

Pulled By: hramos

fbshipit-source-id: 5d53772dc2d127b002ea5fb84fa992934eb65a42
vincentriemer pushed a commit to vincentriemer/react-native-dom that referenced this issue Jan 9, 2018
@joshjhargreaves @facebook-github-bot
Implement onKeyPress Android
2e8f378 
Summary:
This implements onKeyPress for Android on TextInputs and addresses facebook/react-native#1882.
**N.B. that this PR has not yet addressed hardware keyboard inputs**, but doing will be fairly trivial. The main challenge was doing this for soft keyboard inputs.

I've tried to match the style as much as I could. Will happily make any suggested edits be they architectural or stylistic design (edit: and of course implementation), but hopefully this is a good first pass :).
I think important to test this on the most popular keyboard types; maybe different languages too.
I have not yet added tests to test implementation, but will be happy to do that also.

- Build & run RNTester project for Android and open TextInput.
- Enter keys into 'event handling' TextInput.
- Verify that keys you enter appear in onKeyPress below the text input
- Test with autocorrect off, on same input and validate that results are the same.

Below is a gif of PR in action.
![onkeypressandroid](https://user-images.githubusercontent.com/1807207/27512892-3f95c098-5949-11e7-9364-3ce9437f7bb9.gif)
Closes facebook/react-native#14720

Differential Revision: D6661592

Pulled By: hramos

fbshipit-source-id: 5d53772dc2d127b002ea5fb84fa992934eb65a42
mathiasbynens pushed a commit to mathiasbynens/react-native that referenced this issue Jan 13, 2018
@joshjhargreaves @mathiasbynens
Implement onKeyPress Android
f5c5a2c 
Summary:
This implements onKeyPress for Android on TextInputs and addresses facebook#1882.
**N.B. that this PR has not yet addressed hardware keyboard inputs**, but doing will be fairly trivial. The main challenge was doing this for soft keyboard inputs.

I've tried to match the style as much as I could. Will happily make any suggested edits be they architectural or stylistic design (edit: and of course implementation), but hopefully this is a good first pass :).
I think important to test this on the most popular keyboard types; maybe different languages too.
I have not yet added tests to test implementation, but will be happy to do that also.

- Build & run RNTester project for Android and open TextInput.
- Enter keys into 'event handling' TextInput.
- Verify that keys you enter appear in onKeyPress below the text input
- Test with autocorrect off, on same input and validate that results are the same.

Below is a gif of PR in action.
![onkeypressandroid](https://user-images.githubusercontent.com/1807207/27512892-3f95c098-5949-11e7-9364-3ce9437f7bb9.gif)
Closes facebook#14720

Differential Revision: D6661592

Pulled By: hramos

fbshipit-source-id: 5d53772dc2d127b002ea5fb84fa992934eb65a42
jsm pushed a commit to unclechau/react-native that referenced this issue Feb 12, 2018
@joshjhargreaves @jsm
Implement onKeyPress Android
3fad859 
Summary:
This implements onKeyPress for Android on TextInputs and addresses facebook#1882.
**N.B. that this PR has not yet addressed hardware keyboard inputs**, but doing will be fairly trivial. The main challenge was doing this for soft keyboard inputs.

I've tried to match the style as much as I could. Will happily make any suggested edits be they architectural or stylistic design (edit: and of course implementation), but hopefully this is a good first pass :).
I think important to test this on the most popular keyboard types; maybe different languages too.
I have not yet added tests to test implementation, but will be happy to do that also.

- Build & run RNTester project for Android and open TextInput.
- Enter keys into 'event handling' TextInput.
- Verify that keys you enter appear in onKeyPress below the text input
- Test with autocorrect off, on same input and validate that results are the same.

Below is a gif of PR in action.
![onkeypressandroid](https://user-images.githubusercontent.com/1807207/27512892-3f95c098-5949-11e7-9364-3ce9437f7bb9.gif)
Closes facebook#14720

Differential Revision: D6661592

Pulled By: hramos

fbshipit-source-id: 5d53772dc2d127b002ea5fb84fa992934eb65a42
@bunnyc1986
Copy link

@joshyhargreaves, thanks for creating this PR. That's exact what I am looking for.
May I ask what is the status? Is it going to be merged soon? I look forward to seeing it on next RN version.

@gianpaj
Copy link

gianpaj commented Apr 12, 2018 •
edited
Loading

Same question to @joshyhargreaves on the status on #14720

@joshjhargreaves
Copy link
Contributor

@gianpaj this landed a while ago! https://twitter.com/joshyhargreaves/status/949022712814555142

@gianpaj
Copy link

gianpaj commented Apr 12, 2018

thanks great! I got confused because the docs mention it's only for iOS and the PR is closed, not merged.

I've opened a PR to update the docs:
facebook/react-native-website#297

@facebook facebook locked as resolved and limited conversation to collaborators Oct 12, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 12, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests