0

I've got a 3rd party module that is showing configurable product details in a grid (i.e. it shows a list of the simple options next to the price of the simple and a qty field, all in a table format).

What we've noticed is that tabbing does not move you from one qty field to the next. Specifically, when you change the qty field and press the Tab key knockout would trigger a change event which reloads the table.

Is there a way of telling that the change event was triggered by the user tabbing out of the qty field? If so, is there a way of automatically placing the user into the next qty field?

For reference, here is the generated html:

<input type="number" data-bind="value: order_qty, event: {change: function(data, event) { $parent.updateInputQty() }}, attr: {'data-product-id': id, name: 'qty[' + id + ']'}" title="Qty" class="input-text qty" maxlength="12" value="0" data-product-id="443865" name="qty[443865]">

And the change function is:

updateInputQty: function () {
    this.canUpdateQty(true);
    this.calculateTotal();
},
1

You can do this by detecting if the tab key (keyCode 9) triggered the event, something like this should help:

function(data, event) {
  if (event.keycode && event.keyCode == 9) {
    // Handle tab event here
  } else {
    // Handle other event here
  }
}
2
  • Will I need to change the generate html to pass data and event into the function? – Richard Parnaby-King May 19 at 14:13
  • I'm not too sure what you mean by generated, you should have a HTML template you can edit. In your code data and event are already added - change: function(data, event) – Ben Crook May 19 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.