In the cart, if you update a quantity then press Enter, the first product is removed from the cart as the Remove button is the first on the page. This is unexpected from a user point of view; pressing Enter in the quantity field should just update the quantity.

This is similar to #927176: "Enter" key removes file instead of saving node but the fix is not straightforward. It looks like we will have to use some JavaScript to trap the Enter keypress and click the correct button, as the only other way of setting a default button is to put it first in the source, which I don't think we can achieve with the layout we have - the buttons need to go after the table.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

e5sego’s picture

The same happens in 6.x-2.x-dev

Workaround:
Adding an submit button with attribute style="display: none" at first to the form will fix the problem.
I also tryed adding tabindex attribute to the lower >update cart< button, but this does not work.

longwave’s picture

Does the display:none technique work in all versions of IE? I found conflicting information about whether it works or not.

It seems that maybe a duplicate submit button at the top of the form with CSS position: absolute; left: -9999px; width: 0; height: 0; may be more cross-browser compatible.

e5sego’s picture

Good point. In IE 8 display:hidden caused the extra button to be useless, so longwave's attributes are better.

You can use this snipped of JS to add the button (invisible):

jQuery.fn.extend( {

  outerHtml: function( replacement )
  {
    // We just want to replace the entire node and contents with
    // some new html value
    if (replacement)
    {
      return this.each(function (){ $(this).replaceWith(replacement); });
    }

    /*
     * Now, clone the node, we want a duplicate so we don't remove
     * the contents from the DOM. Then append the cloned node to
     * an anonymous div.
     * Once you have the anonymous div, you can get the innerHtml,
     * which includes the original tag.
     */
    var tmp_node = $("<div></div>").append( $(this).clone() );
    var markup = tmp_node.html();

    // Don't forget to clean up or we will leak memory.
    tmp_node.remove();
    return markup;
  }
});

$(document).ready(function() {
  var extra_button = $('#edit-update').clone();
  extra_button.attr('id', extra_button.attr('id') + '-extra');
  extra_button.css('visibility', 'hidden');
  extra_button.css('position', 'absolute');
  extra_button.css('left', '-9999px');
  extra_button.css('width', '0px');
  extra_button.css('hight', '0px');
  $('#uc-cart-view-form').html(extra_button.outerHtml() + $('#uc-cart-view-form').html());
});

You have to have jquery loaded of course.

longwave’s picture

Status: Active » Needs review
FileSize
1.16 KB

We can output the button directly in the HTML.

Island Usurper’s picture

The patch works, but I'm trying to decide if it would be better for the invisible button to be "Checkout" instead of "Update cart". For whatever reason, I was surprised that it didn't go straight to checkout when I pressed Enter while testing. I also wasn't looking for the feedback message, so I was thrown off when it looked like nothing had changed between page loads.

I dunno. Maybe I'm just weird.

Sinan Erdem’s picture

In my opinion, invisible button should definitely be "Update Cart". I am thinking of a scenario that a user may change one item's quantity, then press Enter. Going directly to Checkout may confuse the user. Maybe the user will try to change other quanitites as well. I know this behavior from some user tests.

Thanks for the patch on #4.

Sinan Erdem’s picture

Is the patch apply also for Drupal 6 version? I tried it but it doesn't create the necessary button. It creates just an empty div... (Didnt aplly as a patch but just added the lines manually)

longwave’s picture

The patch will need modifying for D6.

Sinan Erdem’s picture

Isn't there another solution for D6? I cannot convert the code to work with D6.

longwave’s picture

Status: Needs review » Fixed

Patch no longer applied, but I rewrote and committed it to 7.x:
http://drupalcode.org/project/ubercart.git/commitdiff/baf84fc

Also ported and committed to 6.x:
http://drupalcode.org/project/ubercart.git/commitdiff/2df2e42

longwave’s picture

@Island Usurper: We could add an option for "default action when Enter is pressed in cart" if you think it's worth doing?

Sinan Erdem’s picture

Longwave, the patch for 6.x works very well. Thank you.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Island Usurper’s picture

@11, I don't think an option is worth doing, since it would be complicated by the possibility of any express checkout buttons. "Update Cart" is the most natural choice for the enter key, since the user had to have selected the quantity field for it to work. (At least, I believe most browsers work that way.)

johnnydarkko’s picture

Thanks longwave! The 6.x patch in #10 works great for firefox and chrome, but it looks like it doesn't fix IE. Any ideas? I'll be looking into this...

OldAccount’s picture

This is still happening in 7.x-3.0-rc2 (IE only), should I create a new issue or is dev newer than rc2?

longwave’s picture

Title: "Enter" key in cart removes product rather than updating quantity » "Enter" key in cart removes product rather than updating quantity in IE
Status: Closed (fixed) » Active

Reopening as per #15 and #16

longwave’s picture

Status: Active » Needs review
FileSize
280 bytes

This seems to work better in IE, as long as there are two or more items in the cart. If there is only one, it still gets removed for some reason. Tested in IE7.

seanr’s picture

Status: Needs review » Needs work

I can confirm this works with > than 1 item as well. We still need to figure out why it's not working with just one item. Marking as needs work because of that, but I still think this should get committed before we waste too much time chasing the last vestiges of this bug, given IE's ubiquity and prevalence for obscure misbehavior.

seanr’s picture

Note, IE8 is displaying the same obnoxious behavior. Oh, how I hate IE. :-(

longwave’s picture

Title: "Enter" key in cart removes product rather than updating quantity in IE » "Enter" key in cart with only one product removes product rather than updating quantity in IE
Status: Needs work » Active

Committed #18. All that remains as far as I can tell is the corner case of IE with a single item in the cart.

bensey’s picture

And in IE9. This behaviour still happens for me (and all others) no matter how many items are in the cart.
I've just done some serious testing on a site about to be launched with many subjects on different computers and this was the first issue reported. It seems that as the "remove" button for the the first item is the first button, so it is the button that is submitted when enter is pressed.

I've had numerous reports during testing from people who have updated an item's quantity and hit enter (regardless of how many items are in the cart), to find that the first item in the cart had disappeared.

I'd be inclined to go with #6 and make it "update cart" as it is the action expected when someone enters a new quantity and hits enter.

longwave’s picture

@bensey: are you testing with 7.x-3.0 or 7.x-3.x-dev? In 7.x-3.x-dev this is only an issue for me now when one item is in the cart, thanks to the patch in #18 (but this is not included in 7.x-3.0)

bensey’s picture

Thanks longwave,
the 7.x-3.x-dev does indeed fix the issue, even when there is only one item too.

priyankap’s picture

Hi Folks,

Found a workaround to address the above issue for D6..

Add a hidden update button to the cart form above the cart items.

Here's the code snippet:

1: uc_cart.module in function uc_cart_view_form($form_state, $items = NULL), add the following code;

$form['update1'] = array(
'#type' => 'submit',
'#value' => t('Update Qty.'),
'#submit' => array('uc_cart_view_form_submit'),
);

after code:
$context = array(
'revision' => 'themed-original',
'location' => 'cart-subtotal',
);

before code:
$i = 0;
foreach ($items as $item) {

2: uc_cart.module in function theme_uc_cart_view_form($form), add the following code;

$cs_element1 = drupal_render($form['update1']);
$output= '

'. $cs_element1 .'

';

after code:
drupal_add_css(drupal_get_path('module', 'uc_cart') .'/uc_cart.css');

before code:
$output = '

'. drupal_render($form['items']) .'

';

Also,
comment; $output = '

'. drupal_render($form['items']) .'

';
and Add; $output.= '

'. drupal_render($form['items']) .'

';

======================================================

The above changes will add a update button, which will appear first in source code.
Now, we need to hide the button.

======================================================
3: uc_cart.css, add the following code;
#cart-form-buttons1 #edit-update1 {
height:0px;
width:0px;
left:-9999px;
position:absolute;
}

======================================================
Reason behind getting a php solution was, that it should work in all the browsers.
This is tested in Firefox, IE6, IE7, IE8, Chrome, Opera

longwave’s picture

@priyankap: Please upload your changes as a patch file so they can be reviewed. See http://drupal.org/node/707484 for instructions on how to create a patch.

TR’s picture

Version: 7.x-3.x-dev » 6.x-2.x-dev
Status: Active » Needs work
longwave’s picture

Status: Needs work » Closed (won't fix)

I don't think there is anything we can do about the IE one item corner case; when there is only one textfield in a form, IE does not send a value for the submit button. Otherwise, this seems to be working as expected in all other browsers.