[bug]: When on mobile, quantity value isn't automatically selected, forcing a user to have to manually clear the old value before entering a new one

[luke-denton-aligent]

Describe the bug

When on mobile and selecting the quantity input on the PDP, the current value isn't automatically selected, meaning a user has to use the back space key on their keyboard before entering the quantity that they would actually like.

Further, we're not able to use the up and down arrow keys on a keyboard to increase/decrease the value.

To reproduce

Steps to reproduce the behaviour:

1. Using a mobile device, visit https://venia.magento.com/penelope-peasant-blouse.html
2. Select the quantity input field
3. Depending on where you tap on the screen, the cursor will either be in front of the current value, or following the current value

If the cursor is placed in front of the current value, then you will have to try to tap again on the quantity input to place the cursor following the value, so that you can actually use the backspace key to clear the current value

Expected behaviour

Ideally when selecting the quantity input, users would be able to select their new value, rather than having to clear the value that is currently there.

Screenshots

Possible solutions

Ideally we would use the number input. I'm aware there are accessibility issues with that element though.

That means we have to introduce JavaScript to automatically select the input's value on focus, so that typing anything into the soft keyboard (and even regular keyboard when on a desktop) will clear the current value.

We will also need to use JavaScript to implement the increase/decrease function through the up/down arrow keys on a keyboard.

Please complete the following device information:

• Device [e.g. iPhone6, PC, Mac, Pixel3]: Mobile
• Browser [e.g. Chrome, Safari]: All
• Browser Version [e.g. 22]: All
• Magento Version [e.g Adobe Commerce 2.4]: Any

Please let us know what packages this bug is in regards to:

• [x] venia-ui

[m2-assistant[bot]]

Hi @luke-denton-aligent. Thank you for your report. To speed up processing of this issue, make sure that you provided sufficient information.

Add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[luke-denton-aligent]

@Jordaneisenburger Can you please review?

[anthoula]

@magento export issue to JIRA project PWA as Bug

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.magento.com/browse/PWA-2779 is successfully created for this GitHub issue.

[anthoula]

Thanks for your feedback! We are planning to include accessibility improvements to the quantity stepper in an upcoming feature epic that is currently In Progress, and will include this feedback for review.

[Sahilsks]

@magento I am working on this

[Sahilsks]

Please assign it to me @magento I am working on this

[glo42707]

@adobe export issue to JIRA project PWA as Bug

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/PWA-3171 is successfully created for this GitHub issue.

[glo42707]

hey @luke-denton-aligent

we are not able to reproduce this issue on mobile at our end hence could you please confirm if it still exist at your end. so we can try same.

[glo42707]

clsoing the ticket since no updated from past 2 weeks as per process followed. please feel free to reopen tickect in case issue still persit.