Shopping cart, minus and plus buttons, and the event.preventDefault() bug
This post is part of a series on the test IO blog about real bugs that our testers have found during test cycles. In each post, we explore the details of the issue, explain its impact, and discuss what software teams can do to avoid similar problems.
In online shopping carts, minus (-) and plus (+) buttons are an additional interface element that can be used to increment or decrement item quantity, not as arithmetic symbols for calculations. When it comes to the quantity of products in a shopping cart, the numeric value is what is used to calculate the total price or other cart-related calculations. In user design, minus and plus buttons add a certain elegance and user-friendliness to the website. For example, without a minus or plus button a user may have to type the quantity in the text field and then use another button to update.
For our bug of the week, we’re taking a look at a bug on an ecommerce site that is preventing users from decreasing the quantity using the minus button.
While testing an ecommerce site, one of our testers found a bug during usability testing by attempting to decrease the quantity of an item in the shopping cart using the minus button. First, the tester added the items. In a separate step, the tester tried to remove those items by clicking the minus button. The tester then tried to increase the quantity with the plus button. The tester was able to increase the quantity with the plus button, but was not able to decrease the quantity with the minus button.
The bug was initially discovered on Mac OS 10.10, Safari. However, it ended up being reproducible on multiple devices and versions of iOS.
In this case, the minus button may not have worked because the event.preventDefault() ignored that there was a value in the quantity field, which could have been the result of an issue with (OnClick).