Skip to main content

Search and Top Navigation

#14180 closed bug (wontfix)

Opened August 18, 2015 04:54PM UTC

Closed May 03, 2017 12:58PM UTC

Selectmenu: Page jumps when clicking on selectmenu in IE8

Reported by: tn Owned by: tn
Priority: minor Milestone: none
Component: ui.selectmenu Version: 1.11.2
Keywords: Cc:
Blocked by: Blocking:
Description

In IE8, clicking on any select/dropdown menu causes the page to scroll/jump to the top of the page.

JQuery UI 1.11.4

JQuery UI 1.11.1

what do we expect to see:

[[Image(http://s13.postimg.org/ud1mp1t9z/Screen_Shot_2015_08_18_at_19_40_17.png)]]

what we do see:

[[Image(http://s1.postimg.org/jk5m3f05b/Screen_Shot_2015_08_18_at_19_51_24.png)]]

Attachments (0)
Change History (6)

Changed August 18, 2015 05:14PM UTC by tn comment:1

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

Changed August 19, 2015 04:54PM UTC by scottgonzalez comment:2

owner: → tn
status: newpending

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?

Changed August 19, 2015 11:06PM UTC by blargoner comment:3

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
  • 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.

Changed August 20, 2015 02:21PM UTC by scottgonzalez comment:4

status: pendingopen
version: 1.11.41.11.2

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.

Changed August 20, 2015 02:22PM UTC by scottgonzalez comment:5

summary: Forced scroll/jump to top of page on click on any selectmenuSelectmenu: Page jumps when clicking on selectmenu in IE8

Changed May 03, 2017 12:58PM UTC by scottgonzalez comment:6

resolution: → wontfix
status: openclosed

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