Describe the bug
When using iOS Safari and submitting a form, if there are invalid inputs and the mobile keyboard is still showing, the browser does not scroll to the focused input field. Therefore, if the field is not visible without scrolling, the user has no indication for what is happening and why their submission didn't go through.
To Reproduce
Steps to reproduce the behaviour:
On iOS Safari
Add several items so you would have to scroll to see the top item, and navigate to the cart
Change the quantity for the top item in the cart to above the max input
Scroll down and click Update Cart
The keyboard is still visible throughout
Observe, it looks as though nothing is happening, though if you scroll up, you should see the input error
Click into another input and click Update Cart again
Observe the browser will correctly scroll to the invalid input (newly focused)
Manually close the mobile keyboard
Click Update Cart
Observe the browser will correctly scroll to the invalid input (still focused from step 9)
The specific conditions seem to be:
Invalid input
Invalid input is focused
Mobile keyboard is displayed
Expected behaviour
The browser should automatically scroll to the invalid/focused input, regardless of the mobile keyboard showing
Smartphone (please complete the following information):
Device: iPhone 13
OS: 17.5.1
Browser: Safari
Additional context
Using blur() and/or focus() does not seem to have an effect, including with $(document.activeElement).blur() or $('input').blur(), as many threads indicated.
Describe the bug When using iOS Safari and submitting a form, if there are invalid inputs and the mobile keyboard is still showing, the browser does not scroll to the focused input field. Therefore, if the field is not visible without scrolling, the user has no indication for what is happening and why their submission didn't go through.
To Reproduce Steps to reproduce the behaviour:
The specific conditions seem to be:
Expected behaviour The browser should automatically scroll to the invalid/focused input, regardless of the mobile keyboard showing
Smartphone (please complete the following information):
Additional context Using blur() and/or focus() does not seem to have an effect, including with
$(document.activeElement).blur()
or$('input').blur(),
as many threads indicated.