Hello there,

I'm running in a very strange 'bug' with the javascript in commerce checkout which disables the button to avoid it's clicked twice.
It seems this javascript also reacts on pressed 'enters'.

This conflicts with an autocomplete in the checkout-pane's. When you use an autocomplete (to be precise, for an entity reference) and you type some first letters, the autocomplete shows some options. If you choose an option with key arrows and press enter on the selected option. The commerce checkout javascript is also called, which disables the option to goto to the next step.

Selecting the autocomplete option by mouse, doesn't trigger the javascript (which is offcourse good). Using an enter in a textfield, also doesn't seem to trigger the javascript.

I have absolutely no knowloedge of javascript, but seems an extra check to see, if the pressed key comes from the submit button may be the solution.

Hopefully my issue is clear.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

rszrama’s picture

Category: bug » support
Status: Active » Postponed (maintainer needs more info)

Can you tell me how you've setup your site so we can reproduce the issue? An enter press on an autocomplete widget shouldn't be triggering form submission.

mallezie’s picture

You can test on http://krinkel.mallezie.kiplin-drupal01.chiro.be/krinkel-2013
If You choose one of the product's, you enter a registration form. (From entity_registration / Commerce_registration module).
There you have a field 'Groep' or 'Ploeg' (dependant on your first choice) where you can select an entity reference (type 'sche' for example, that generates results). Making a choice, with the arrows, and pressing enter, blocks the 'continue' button. (At lesast tested in chromium and firefox).

rszrama’s picture

Yeah, this is really odd behavior. The JavaScript is even specifically attached to the click event of the button, not even just general form submission which I'd expect to introduce problems on an enter press:

    // When the buttons to move from page to page in the checkout process are
    // clicked we disable them so they are not accidently clicked twice.
    $('input.checkout-continue:not(.checkout-processed)', context).addClass('checkout-processed').click(function() {
      var $this = $(this);
      $this.clone().insertAfter(this).attr('disabled', true).next().removeClass('element-invisible');
      $this.hide();
    });

I guess we need to find out if this is a general problem or just related to your site, but I can't see why the browser is interpreting enter as a click on that button. :-/

mallezie’s picture

Status: Postponed (maintainer needs more info) » Active

I found some sort of solution with following javascript code.

(function($) {

/**
 * Disable the continue buttons in the checkout process once they are clicked
 * and provide a notification to the user.
 */
Drupal.behaviors.commerceCheckout = {
  attach: function (context, settings) {
    $('input.form-autocomplete').keypress(function(e){
        var code = e.keyCode || e.which;
        if( code === 13 ) {
            e.preventDefault();
        }
    });
    // When the buttons to move from page to page in the checkout process are
    // clicked we disable them so they are not accidently clicked twice.
    $('input.checkout-continue:not(.checkout-processed)', context).addClass('checkout-processed').click(function() {
      var $this = $(this);
      $this.clone().insertAfter(this).attr('disabled', true).next().removeClass('element-invisible');
      $this.hide();
    });
  }
}

})(jQuery);

I found some information on following links:
http://stackoverflow.com/questions/12325066/button-click-event-fires-whe...
http://stackoverflow.com/questions/4763638/enter-triggers-button-click/4...

It seems that perhaps disabling the button as submit button should do the trick.

mallezie’s picture

Also noticed that hitting the enter key on a select-element doesn't trigger the click event. Neither when hitting enter in a text-area.

John Franklin’s picture

Issue summary: View changes

This is a serious problem with Commerce Registration sites. The registration pane includes a user autocomplete. Hitting enter to select a user from the autocomplete triggers the javascript and makes it impossible to "Continue to next step."

John Franklin’s picture

Status: Active » Needs review
FileSize
806 bytes

Here's mallezie's JS as a patch. Thanks, mallezie.

Status: Needs review » Needs work

The last submitted patch, 7: commerce-double_click_false_positive.patch, failed testing.

John Franklin’s picture

Status: Needs work » Needs review
FileSize
788 bytes

Re-roll the patch for the benefit of the testing bot.

vasike’s picture