Opened 4 years ago

Closed 2 years ago

#14180 closed bug (wontfix)

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:

http://s13.postimg.org/ud1mp1t9z/Screen_Shot_2015_08_18_at_19_40_17.png

what we do see:

http://s1.postimg.org/jk5m3f05b/Screen_Shot_2015_08_18_at_19_51_24.png

Change History (6)

comment:1 Changed 4 years ago by tn

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

comment:2 Changed 4 years ago by Scott González

Owner: set to 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?

comment:3 Changed 4 years ago by blargoner

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.

comment:4 Changed 4 years ago by Scott González

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.

comment:5 Changed 4 years ago by Scott González

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

comment:6 Changed 2 years ago by Scott González

Resolution: wontfix
Status: openclosed

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

Note: See TracTickets for help on using tickets.