crazycooky77 / ci_project5

0 stars 1 forks source link

[BUG] iOS Safari doesn't scroll to focused invalid inputs when keyboard is visible #47

Open crazycooky77 opened 1 month ago

crazycooky77 commented 1 month ago

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:

  1. On iOS Safari
  2. Add several items so you would have to scroll to see the top item, and navigate to the cart
  3. Change the quantity for the top item in the cart to above the max input
  4. Scroll down and click Update Cart
    1. The keyboard is still visible throughout
  5. Observe, it looks as though nothing is happening, though if you scroll up, you should see the input error
  6. Click into another input and click Update Cart again
  7. Observe the browser will correctly scroll to the invalid input (newly focused)
  8. Manually close the mobile keyboard
  9. Click Update Cart
  10. Observe the browser will correctly scroll to the invalid input (still focused from step 9)

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.