Question

I’m encountering an issue with a JQuery modal form with many labels and corresponding input fields in it.

The issue occurs when I open the JQuery modal form and scroll down. When I close and re-open the JQuery modal form, the form is auto-scrolled so that the first input field is at the top of the form and has keyboard focus. However, this cuts off the label and header above the first input field.

I have tried $(“input”).blur(), and that successfully disables keyboard focus on the first input element, but the modal form still automatically scrolls so that the first input form is flush against the top of the screen.

I have also tried placing a hidden input field above everything else in the JQuery modal form, but Firefox is smart about it and still scrolls to the first active non-hidden input element.

Has anyone encountered this situation before, and if so, does anyone know the proper resolution for it?

Answer 1

Issue resolved. I used the scrollTop() method on the JQuery modal dialog div itself, like so:

$(“dialog”).scrollTop(0);

This is separate and distinct from autofocus/blur issues, as Firefox’s autopositioning apparently does not tie with its autofocus.