Selectmenu: Page jumps when clicking on selectmenu in IE8

There is no jumping in the older version but it does jump in the latest version.

I'm not seeing that behavior. Tested in IE8 on Windows XP and Windows 7. Are you actually experiencing the problem with the fiddle you provided?

Hello,

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:

https://gist.github.com/blargoner/df46e5c94e1635cfac50

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

• In http://bugs.jqueryui.com/ticket/10639, a user reported that the fix in 1.11.1 caused a new regression: now the select menu was not getting focus when a select menu was opened, interfering with autocomplete functionality. This was fixed in 1.11.2 by storing the current DOM selection on mousedown, then later reselecting it and restoring focus to the select menu: https://github.com/jquery/jquery-ui/pull/1358/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

if(!this.range)

check in line 355 of the last link is not sufficient for this because the

TextRange

object still exists in this case (and hence

this.range

is not a falsy value), but

this.range.text

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.

Interestingly this is caused by the list of steps in that page. There has to be some actual content that's scrolled off the page, which the jsbin didn't include. You can reduce the body to:

<p>I cause the jump</p>
<div style="height: 1000px"></div>
<select style="width: 200px;">
  <option>...</option>
</select>

and that will reproduce the problem.

Sadly, we may need to store the scroll position(s) and restore after the selection/focus handling.

We no longer support IE8 and this bug doesn't affect newer versions.