React: Unexpected behaviour on Input element onKeyPress event

Created on 24 Jul 2014 · 13Comments · Source: facebook/react

Here's the element I have:

React.DOM.input({onKeyPress: this.onKeyPress});

onKeyPress: function(event) {
if (event.keyCode === 13) // Enter key
event.preventDefault();
}

With react 0.10, preventDefault was working. On 0.11, with the focus on the input, pressing enter does a form submit and reloads the page.

I've also tried doing the preventDefault on the onKeyDown event with no luck.

Bug

Source

marcbelmont

Most helpful comment

See #1898 – for the enter key you should be using the keydown event. If you still can't get it to work with onKeyDown, can you post a jsfiddle showing the problem? Note also that you can now write e.key === 'Enter' instead of e.keyCode === 13 if you want.

sophiebits on 24 Jul 2014

👍3

All 13 comments

sophiebits on 24 Jul 2014

👍3

I've tried with onKeyDown already. Let me jsfiddle it.

marcbelmont on 24 Jul 2014

@marcbelmont You need to use charCode === 13 and not keyCode as it's onKeyPress. However, we've polyfilled a lot of .key so just use .key === 'Enter' instead.

syranide on 24 Jul 2014

Here's a quick example of the problem I have with 0.11

<html>
  <head>
    <title>Test</title>
    <script src="http://fb.me/react-with-addons-0.11.0.js"></script>
  </head>
  <body>
    <div id="react"></div>
    <script type="text/javascript">
var MyInput = React.createClass({
  handleKeyDown: function(event) {
    event.preventDefault();
    // When I press Enter the form is submitted. With 0.10 it was not submitted.
  },
  render: function() {
    return React.DOM.form({}, React.DOM.input({
      onKeyDown: this.handleKeyDown
    }));
  }
});

React.renderComponent(MyInput({}), document.getElementById('react'));
    </script>
  </body>
</html>

Tested with "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:31.0) Gecko/20100101 Firefox/31.0"
Adding an onSubmit handler on the form element can prevent the form to submit.

marcbelmont on 24 Jul 2014

@marcbelmont That seems to work just fine for me.

syranide on 24 Jul 2014

@syranide
I have the problem on Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:31.0) Gecko/20100101 Firefox/31.0
Chrome is doing fine.

marcbelmont on 24 Jul 2014

@marcbelmont Weird, I tested it in SauceLabs for your browser and got the incorrect behavior. Then I refreshed and I don't get it anymore and can't reproduce it.

syranide on 24 Jul 2014

@marcbelmont Did this resolve itself or is it still an issue for you?

syranide on 17 Oct 2014

It is not an issue for me anymore. I chose to do things
differently. However, the piece of html in my previous comment is
still not doing the correct thing.

marcbelmont on 18 Oct 2014

Has there been any progress on this ticket? I am dealing with the same issue.