[TextInput] Implements `onKeyPress` #2082

dsibiski · 2015-07-21T23:13:23Z

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. As per @JonasJonny & @brentvatne's suggestion.
Example

 _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, keyboardInputShouldDelete and deleteBackward for RCTTextField
- keyboardInputShouldDelete and deleteBackward were implemented because UITextField doesn't trigger shouldChangeCharactersInRange when the field is empty, preventing us from having a true keyPress event.
- Unfortunately, it looks like keyboardInputShouldDelete is not documented as alluded to in this StackOverflow answer. However, I'm only using it because of a bug in iOS 8.0 to 8.2 where the deleteBackward method doesn't trigger. This might cause this whole feature to be a no-op, though. :(
Implements shouldChangeTextInRange for RCTTextView
- This one is nice and simple since UITextViews (used for multi-line TextInputs) trigger this method even when the textView is empty.
Addresses issue: [TextInput] Get keydown event to handle "Enter" #1882

sahrens · 2015-07-22T17:21:36Z

Nice work! You're going to have to rebase some conflicts once my diffs sync out though.

dsibiski · 2015-07-22T17:22:38Z

@sahrens Not a problem. :)

brentvatne · 2015-07-22T17:22:54Z

😍 awesome @dsibiski

dsibiski · 2015-07-22T17:25:41Z

I will need to implement an example for the UIExplorer, but I wanted to get some opinions on what's happening here (and the changes they are doing internally at FB) before knocking that out.

brentvatne · 2015-07-22T17:26:00Z

@dsibiski - in your example I see:

 _handleKeyPress: function(e) {
      console.log(e.nativeEvent.text);
  },

imo this should be e.nativeEvent.key. Also, is it deterministic which order onTextChange and onKeyPress fire? If so, we should document (I imagine onKeyPress comes first)

dsibiski · 2015-07-22T17:35:29Z

@brentvatne I had piggy-backed off of the sendTextEventWithType:reactTag:text method that was already there in RCTEventDispatcher (it was easier hah!) However, I think you're right, we should have a different return value, instead of "text". I'll perhaps implement sendTextEventWithType:reactTag:key and return the key or eventually a dictionary with other values as well (like ASCII code).

As for the firing order, in my testing, I noticed that onKeyPress fires before onTextChange, but I didn't test it specifically.

dsibiski · 2015-07-23T21:53:44Z

Ok, I rebased @sahrens's recent changes. I made keyPress still fire even after the maxLength threshold has been reached. Which I think is how a normal text input works on the web.

Now, I just need to implement @brentvatne's suggestion for the nativeEvent & a UIExplorer example.

dsibiski · 2015-07-24T04:27:06Z

nativeEvent.key now used instead of nativeEvent.text. I also added an example to the TextEventsExample in UIExplorer.

/cc @brentvatne @sahrens

sahrens · 2015-07-25T01:19:01Z

Libraries/Text/RCTTextView.m

+{
+  NSString *keyValue = kBackspaceKeyValue;
+
+  BOOL keyNotBackspace = ![text isEqualToString:@""];


can you consolidate this with the enter logic into one if else chain?

sahrens · 2015-07-25T01:25:56Z

I'm going on PTO - nick, can you help out with this one?

dsibiski · 2015-07-28T14:01:26Z

Build failed because of: #2134

dsibiski · 2015-08-06T22:23:34Z

@sahrens @nicklockwood What do you guys think about this? Just rebased the latest master to get rid of the conflicts...

dsibiski · 2015-08-11T03:20:21Z

Note to self: Once this commit (vjeux@48548fe) lands, I'll need to move most (or all) of this into the RCTTextFieldManager where shouldChangeCharactersInRange was moved.

dsibiski · 2015-08-26T20:49:06Z

@sahrens @nicklockwood I rebased the current changes and was able to remove some of the 'backspace' press detection hacks. Can you guys check this out when you get a chance?

I think that the "paste" detecting is a little wonky, let me know what you think.

GantMan · 2015-10-27T14:54:36Z

Checking in - Is this happening?
I'd love to be able to detect when the return key is pressed for iOS.

dsibiski · 2015-10-27T14:59:14Z

@nicklockwood @sahrens Hey guys, do you guys want me to add Android support to this as well? I imagine that might be the reason for the hold up...

nicklockwood · 2015-10-27T16:00:23Z

React/Base/RCTEventDispatcher.m

    @"eventCount": @(eventCount),
    @"target": reactTag
  }];
+
+  if (text) {
+    [body addEntriesFromDictionary:@{@"text": text}];


This can just be:

if (text) { body[@"text"] = text; }

nicklockwood · 2015-10-27T16:02:54Z

Android support would be great, but it's OK to just mark the prop with @platform ios for now.

nicklockwood · 2015-10-27T16:05:54Z

Libraries/Text/RCTTextKeyValueConstants.h

+extern NSString *const RCTNewlineRawValue;
+
+extern NSString *const RCTBackspaceKeyValue;
+extern NSString *const RCTEnterKeyValue;


Files should end with a blank line.

facebook-github-bot · 2015-10-28T19:08:19Z

@dsibiski updated the pull request.

dsibiski · 2015-10-28T19:10:35Z

Hmm, somehow the newline at the end of the file didn't come through...it seems to still be there in Xcode... @nicklockwood Do you know if that is something with git?

(Edit) Perhaps it's there and just GitHub doesn't see it...

nicklockwood · 2015-10-30T13:13:33Z

@facebook-github-bot import

facebook-github-bot · 2015-10-30T13:15:44Z

Thanks for importing. If you are an FB employee go to https://our.intern.facebook.com/intern/opensource/github/pull_request/946196175402219/int_phab to review.

dsibiski · 2015-10-30T13:24:44Z

Oops, I better squash my commits...

- When a key is pressed, it's `key value` is passed as an argument to the callback handler

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

matc4 · 2016-01-25T19:46:13Z

Any plan to have onKeyPress event for Android?

atticoos · 2016-02-16T21:48:34Z

Probably a feature someone will have to contribute @MatiasCba. I'm currently in need, but I haven't scoped out what it looks like under the hood for Android. If it's already set up similarly, it shouldn't be too bad.

mpretty-cyro · 2016-02-22T23:42:03Z

+1 for onKeyPress in Android

atticoos · 2016-02-23T03:37:16Z

Working on a fork at the moment, if I finish up I'll refer from here

mpretty-cyro · 2016-02-23T04:03:16Z

@ajwhite Awesome, thanks for the update

jgibbons · 2016-03-01T16:53:51Z

@ajwhite Any updates on this or work you've done to date?

atticoos · 2016-03-01T17:04:06Z

I haven't any updates at this time, I likely cannot visit this for another couple weeks. Busy bee at work!

PardeepK · 2017-07-26T12:44:23Z

@ajwhite , any update on Android support?
or any reason why it is not there for Android, as it seems very basic requirement for an edit control.

atticoos · 2017-07-26T14:44:51Z

I don't, sorry folks! It became a bit of a rabbit hole and was deprioritized in our project in lieu of a workaround.

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Jul 21, 2015

dsibiski mentioned this pull request Jul 21, 2015

[TextInput] How do you implement maxLength for TextInput? #1945

Closed

sahrens assigned achao, amasad and sahrens and unassigned achao and amasad Jul 22, 2015

dsibiski force-pushed the onkeypress branch from 281fb4c to d8b459b Compare July 23, 2015 21:35

sahrens reviewed Jul 25, 2015
View reviewed changes

sahrens assigned nicklockwood and unassigned sahrens Jul 25, 2015

dsibiski force-pushed the onkeypress branch from bb5185c to c5eb875 Compare August 6, 2015 22:22

dsibiski force-pushed the onkeypress branch from 97a249e to ba00a45 Compare August 26, 2015 20:33

nicklockwood reviewed Oct 27, 2015
View reviewed changes

[TextInput] Implements onKeyPress

1aff728

- When a key is pressed, it's `key value` is passed as an argument to the callback handler

dsibiski force-pushed the onkeypress branch from 56995ca to 1aff728 Compare October 30, 2015 13:34

ghost closed this in 6c7c845 Nov 2, 2015

uncle-T0ny mentioned this pull request Oct 24, 2016

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

Closed

PardeepK unassigned nicklockwood Jul 26, 2017

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TextInput] Implements `onKeyPress` #2082

[TextInput] Implements `onKeyPress` #2082

dsibiski commented Jul 21, 2015

sahrens commented Jul 22, 2015

dsibiski commented Jul 22, 2015

brentvatne commented Jul 22, 2015

dsibiski commented Jul 22, 2015

brentvatne commented Jul 22, 2015

dsibiski commented Jul 22, 2015

dsibiski commented Jul 23, 2015

dsibiski commented Jul 24, 2015

sahrens Jul 25, 2015

sahrens commented Jul 25, 2015

dsibiski commented Jul 28, 2015

dsibiski commented Aug 6, 2015

dsibiski commented Aug 11, 2015

dsibiski commented Aug 26, 2015

GantMan commented Oct 27, 2015

dsibiski commented Oct 27, 2015

nicklockwood Oct 27, 2015

nicklockwood commented Oct 27, 2015

nicklockwood Oct 27, 2015

facebook-github-bot commented Oct 28, 2015

dsibiski commented Oct 28, 2015

nicklockwood commented Oct 30, 2015

facebook-github-bot commented Oct 30, 2015

dsibiski commented Oct 30, 2015

matc4 commented Jan 25, 2016

atticoos commented Feb 16, 2016

mpretty-cyro commented Feb 22, 2016

atticoos commented Feb 23, 2016

mpretty-cyro commented Feb 23, 2016

jgibbons commented Mar 1, 2016

atticoos commented Mar 1, 2016

PardeepK commented Jul 26, 2017

atticoos commented Jul 26, 2017

[TextInput] Implements onKeyPress #2082

[TextInput] Implements onKeyPress #2082

Conversation

dsibiski commented Jul 21, 2015

sahrens commented Jul 22, 2015

dsibiski commented Jul 22, 2015

brentvatne commented Jul 22, 2015

dsibiski commented Jul 22, 2015

brentvatne commented Jul 22, 2015

dsibiski commented Jul 22, 2015

dsibiski commented Jul 23, 2015

dsibiski commented Jul 24, 2015

sahrens Jul 25, 2015

Choose a reason for hiding this comment

sahrens commented Jul 25, 2015

dsibiski commented Jul 28, 2015

dsibiski commented Aug 6, 2015

dsibiski commented Aug 11, 2015

dsibiski commented Aug 26, 2015

GantMan commented Oct 27, 2015

dsibiski commented Oct 27, 2015

nicklockwood Oct 27, 2015

Choose a reason for hiding this comment

nicklockwood commented Oct 27, 2015

nicklockwood Oct 27, 2015

Choose a reason for hiding this comment

facebook-github-bot commented Oct 28, 2015

dsibiski commented Oct 28, 2015

nicklockwood commented Oct 30, 2015

facebook-github-bot commented Oct 30, 2015

dsibiski commented Oct 30, 2015

matc4 commented Jan 25, 2016

atticoos commented Feb 16, 2016

mpretty-cyro commented Feb 22, 2016

atticoos commented Feb 23, 2016

mpretty-cyro commented Feb 23, 2016

jgibbons commented Mar 1, 2016

atticoos commented Mar 1, 2016

PardeepK commented Jul 26, 2017

atticoos commented Jul 26, 2017

[TextInput] Implements `onKeyPress` #2082

[TextInput] Implements `onKeyPress` #2082