This buggy jumping behavior was introduced in version 1.11.2 of the select menu and affects at least IE8 on Windows XP and Windows 7. Here is minimal reproduction code:
Save that code to a file locally and load it in IE8 and follow the instruction text on the page to reproduce.
After researching this issue today in detail, I discovered the following history and cause:
- In http://bugs.jqueryui.com/ticket/10144, a user reported that a change in 1.11.0 caused the current DOM selection in the browser to be lost when a select menu was opened, which differed from native select box behavior and was inappropriate for menus where the DOM selection should be maintained (like toolbar menus for rich text editors). This was fixed in 1.11.1 by preventing the DOM selection from being lost: https://github.com/jquery/jquery-ui/pull/1295/files
- The problem with the fix in 1.11.2 is that, if there is no DOM selection when the select menu is opened, then the reselection
this.range.select() (line 366 in the last link) will cause the page to jump back to the top. If there is a DOM selection when the select menu is opened, the page will jump to the position of the DOM selection. Neither of these behaviors is consistent with native select box function in IE8 and is extremely jarring in a use case like the one in the reproduction code.
An ideal fix would prevent the DOM reselection from triggering a page jump/scroll, but I am not certain offhand if that is possible in IE, and if so how to do it. If that is not possible, a partial solution might be to prevent reselection in case the user didn't originally have anything selected. Note the current
check in line 355 of the last link is not sufficient for this because the
object still exists in this case (and hence
is not a falsy value), but
is an empty string. However, this approach may have negative consequences for use cases that require even the position of an empty DOM selection to be maintained.