6

I noticed that Safari in new iOS 16.0 autofocuses an input element if:

  1. type=number or text
  2. pattern=\d*
  3. margin-top on containing element is 48px (I did not test the precise cut-off value here)

Test page: https://www.autoledky.sk/ios.php

autocomplete=off and autofocus=false doesn't change anything. Before iOS 16 there were no such issues. The problem is confirmed on 2 seperate iPhones with iOS 16.

This leads to automatic homepage scrolling, enlarging and opening the keypad, which is unacceptable. How should I solve the issue without obvious "remove input/pattern".

Ellessar
  • 61
  • 5

2 Answers2

3

I couldn't verify the need for any margin criteria. Our scenario didn't match the margins listed here. However I was able to fix our problem on an input[type="number"] field by removing the pattern attribute entirely since it is already a specific field time. By doing so we no longer are seeing the auto-focus in Safari on iOS16.0

I tried many things before finding this topic here and figuring out it was likely a bug, including changing tabindex, disabling javascript, working my way through every plugin on the site we used. Glad to have found someone else struggling with the same issues and having been able to narrow it down a bit more. Thanks!

Bryan Corey
  • 740
  • 7
  • 12
  • I'm glad I'm not the only one. If I remove margin-top, the bug is not present on the first load. But e.g. if I scroll down and either navigate to a different page and come back or press reload, the bug is there again - it clearly has to do something with the input being in some kind of invisible area of interest of the browser which leads to opening the keyboard. I also removed pattern as a temporary solution (which on iOS results in full keyboard instead of numeric pad being displayed). – Ellessar Sep 22 '22 at 14:47
  • Oh I didn't even test the type of keyboard. That's annoying, but hopefully it's not a bug we have to live with very long. – Bryan Corey Sep 22 '22 at 18:56
0

Just adding my 2cts here, I had the same issue, and the problem was caused by an input element located outside of a form tag.

When wrapping the input within a form element, the issue disappeared; hope this can help someone else.

Clément F
  • 116
  • 1
  • 4