Opened 11 years ago

Closed 11 years ago

Last modified 8 years ago

#11712 closed defect (fixed)

Select: scrolling jumps back under IE 6,7,8

Reported by: NickSukharev Owned by: bill
Priority: high Milestone: 1.7
Component: Dijit Version: 1.5
Keywords: Cc: Douglas Hays, cjolif
Blocked By: Blocking:

Description (last modified by bill)

We encountered the following issue with dijit.form.Select when the list is long enough to produce scrolling: if we open the drop down and then attempt to scroll by clicking on the grey area below the slider, the scroll area changes for a moment and then frequently gets reset back to where it was.

It seems that the browser attempts to scroll down one item/page (the list flickers briefly) but does not succeed as the list is immediately set back to show the first items. Note that if you do not release the mouse button while clicking on arrow-down, the list scrolls down itemwise as expected.

There are more scrolling errors in the list:

  1. Scroll down some items by clicking on arrow-down without releasing the mouse button.
  2. Click once on arrow-up to scroll up one item. The list jumps back to the first item in the list.

Horizontal scroll bars (if not hidden) have the same issues.

We observed this behaviour with IE 6, 7 and 8.

It happens every time with dijit.form.Select and to a lesser extent with dijit.form.ComboBox and dijit.form.FilteringSelect. FF and Chrome seem to work fine.

Attached is a sample page we use to demonstrate this behavior. It has to be opened in IE in a small enough window so that there is a scroll bar.

Attachments (2)

test.2.html (7.1 KB) - added by NickSukharev 11 years ago.
11712.patch (446 bytes) - added by Douglas Hays 11 years ago.
possible fix

Download all attachments as: .zip

Change History (18)

Changed 11 years ago by NickSukharev

Attachment: test.2.html added

comment:1 Changed 11 years ago by bill

Component: GeneralDijit
Description: modified (diff)
Owner: anonymous deleted
Summary: Scrolling jumps back under IE 6,7,8 in SelectSelect: scrolling jumps back under IE 6,7,8

I don't know what you mean by "clicking on the grey area below the slider". Maybe you are talking about clicking the down arrow on the scroll bar of the Select drop down? I do see the problem there that it doesn't do anything, that scroll just jumps back to the first row in the drop down.

comment:2 Changed 11 years ago by ext237

Here is additional info for bug #11712. The issue happens on option lists that are long enough to create the scroll bar. If you click on the scroll bar handle (not the arrows, the object that lets you "grab" to pull the scrolling), the scroll bar works as expected.

However, if you click on the area of the scroll bar without the handle (typically lets you "jump" a full page of <options>), it appears to move, but then jumps directly to the top of the list again. If you click multiple times quickly, it will flip down finally.

Notice also as you mouse over the scrollbar, the number of options will shrink briefly (the "handle" will be longer) and then re-fill ... going back to its original size.

Clicking in the empty area of the scrollbar to skip to the next group of options is expected browser behavior and needs to be fixed.

comment:3 Changed 11 years ago by ext237

I also notice this happens most frequently in IE8 in "compatibility" mode.

comment:4 Changed 11 years ago by xsa

This also occurs on FF 3.6.8 to FF 3.6.12 (as tested). When you open the select for first time, this doesn't seems to occur When you maintain mouse down on scroll bar above or below handle, this go to top then scroll. If you click again below or above handle, it's go again on top

comment:5 Changed 11 years ago by Douglas Hays

Owner: set to Douglas Hays

comment:6 Changed 11 years ago by Douglas Hays

Milestone: tbd1.7

comment:7 Changed 11 years ago by bill

Component: DijitDijit - Form

comment:8 Changed 11 years ago by Douglas Hays

This is a problem with MenuItem::focus assuming the entire Menu is viewable and does not scroll

Changed 11 years ago by Douglas Hays

Attachment: 11712.patch added

possible fix

comment:9 Changed 11 years ago by Douglas Hays

Owner: changed from Douglas Hays to bill

Bill, this seems to be a problem in KeyNavContainer? setting focus to the first item when the container is already focused (on IE, clicking the scrollbar causes lots of focus/blur events).

comment:10 Changed 11 years ago by Douglas Hays

Component: Dijit - FormDijit

comment:11 Changed 11 years ago by bill

Cc: Douglas Hays added

Ah thanks for catching that, _onContainerFocus definitely shouldn't be getting called on scroll. But since we are already pulling in the focus manager code, I wonder if using _onFocus() (rather than connecting to "onfocus") will avoid the need for that whole if() statement.

comment:12 Changed 11 years ago by bill

Oh, apparently I wrote a comment explaining why that's no good:

// Note that we can't use _onFocus() because switching focus from the
// _onFocus() handler confuses the focus.js code
// (because it causes _onFocusNode() to be called recursively)

comment:13 Changed 11 years ago by bill

Status: newassigned

PS: the problem with the patch you attached is that tabbing into a toolbar (see test_Toolbar.html) leaves focus on the toolbar itself, rather than shifting focus to the first button in the toolbar. But I'm testing an alternate fix now.

Also, the reason for the "spurious" onfocus event on IE is that clicking the non-handle part of the scrollbar moves focus from the selected menu item to the container itself. I think scollable div's are focusable so that the keyboard user can scroll them.

comment:14 Changed 11 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [24902]) Ignore when container gets focus because user clicked the scrollbar. Fixes problem on IE where it jumps back to the first menu item. Fixes #11712 !strict.

comment:15 Changed 11 years ago by bill

(In [24903]) Replace startupKeyNavChildren() with startup(), so that subclasses don't need to explicitly call startupKeyNavChildren().

Also some minor cleanup.

Refs #11712 !strict.

comment:16 Changed 8 years ago by cjolif

Cc: cjolif added
Note: See TracTickets for help on using tickets.