Enter key on quantity field UX conflict

On the product page, if you change the quantity in the quantity input field and press enter it will add the product to the cart right away, this causes a UX problem with this plugin as the user needs to change the quantity and then configure their product fields for each item before they get added to the cart.

If the user mouse clicks instead away from the quanity field after changing the number instead of pressing enter, the problem is avoided, but many users will press enter, it was the first thing my client did.

I can prevent this default behavior with the following code but…

document.querySelector(".quantity").addEventListener("keypress", function(e) {
	if (e.key === 'Enter') {
		event.preventDefault();
	}
}, false);

This obviously makes pressing enter on the quantity field do nothing at all, is there any code snippet I can add to allow the pressing of the enter to update the number of product option fields without adding anything to the cart?

I really need a solution for this.

• This topic was modified 3 years, 10 months ago by mtlsam.