0

In my Rails app, I am using this jQuery to prevent a form from being submitted when the user presses 'enter' in an input field:

$('input').on('keydown', function(e) {
  if(e.which == '13') {
    return false;
  }
})

I wrote a test in Capybara to make sure the form was not being submitted (more on that here), and had a hell of a time getting the test to work properly. Eventually I discovered that the jQuery function had to target a keydown event, not keypress. It works wonderfully now.

This makes me a bit uncomfortable, because I know that keypress should work just as well, and I know that it actually does work from trying it manually in the browser. But if I want to have a working test for this behavior, I have to do it with keydown.

This is the command that I'm sending to Webkit in my integration test:

page.driver.browser.execute_script "var e = jQuery.Event('keydown'); e.which = 13; $('#shift_employee').trigger( e );"

It goes without saying that when I change the jQuery function to handle keypress instead of keydown, I also change the Ruby line above to trigger a keypress event instead of a keydown event. But the test fails unless I use keydown.

So what's the deal? Is this a Webkit issue? Should I not worry about it, as long as the test is working and the form is not being submitted?

Community
  • 1
  • 1
grandinero
  • 1,155
  • 11
  • 18
  • 1
    Why do you need to prevent submitting on pressing enter? I'd view that as the primary problem. – Kevin B Sep 05 '13 at 20:21
  • @KevinB : I second that! – Harsha Venkataramu Sep 05 '13 at 20:22
  • However, more relevant to the question, I would lean toward using keydown simply because it happens first. keypress requires the user to release the key, while keydown catches it immediately. – Kevin B Sep 05 '13 at 20:23
  • You can add to submit button click event: `$('form').data('allow', true);` and in form submit event `if($('form').data('allow'))` – Krzysiek Sep 05 '13 at 20:27
  • Long story, but I actually didn't intend to do it this way. I'll probably change it back after fixing some other stuff, but I wanted to make sure I could test it in the meantime. When I found that I couldn't, it became an obsession, not because it's so important to prevent submitting the form, but because it's such a simple thing that I felt my inability to test it was a major gap in my knowledge. Most of my problem, though, was not with the keydown/keypress issue, but with the issue mentioned in the other question linked above. – grandinero Sep 05 '13 at 20:29
  • Kryzsiek, that's an interesting suggestion, but my question is more about what's going on with capybara-webkit, not how to prevent form submission. – grandinero Sep 05 '13 at 20:34
  • **Update:** I just realized that the title of this question was really ambiguous. I've changed it to be more relevant to the topic. – grandinero Sep 05 '13 at 20:40

1 Answers1

0

I believe you are over-thinking the problem. The form gets submitted on enter because you have a submit button inside the form. So if you don't want that behavior, you have the following option:

Remove the submit button from your form. If you need the button for other actions, you can simply create a non-submitting element that looks like a button and fire off a submit() when clicked.

Steve
  • 8,609
  • 6
  • 40
  • 54
  • Actually, I don't have a submit button. The form is submitted via AJAX when you click a link. That being said, I will probably not stick with this approach in the long run. I just want to understand why it is necessary for me to use 'keydown' to get my test to pass with Capybara/Webkit. – grandinero Sep 05 '13 at 21:52