Relative Content

Tag Archive for htmlcssformsmobile-safaritab-ordering

On mobile Safari, how can a form’s tab order be kept intact when elements overlay parts of the form?

I built an HTML form including some text inputs which, when focused on, open a container presenting suggestions. This works fine in Firefox, but I discovered that on mobile Safari (iOS 15.7.1), when the container is shown, since it overlays the input fields after it, the “next field” arrow-down button no longer works (it is displayed but doesn’t move the focus).
The visibility of that container is directly associated with the input element’s focus.
It appears as if, with parts of the form in the background through overlaying elements, it’s tab order is reinterpreted, making the “unvisible” fields inaccessible.
Is there a way to prevent this and keep the general appearance intact?