Opened 10 years ago

Closed 10 years ago

Last modified 9 years ago

#10275 closed defect (fixed)

Select: long list of items does not scroll properly in IE 8

Reported by: Becky Gibson Owned by: bill
Priority: high Milestone: 1.4
Component: Dijit - Form Version: 1.4.0b
Keywords: a11y Cc: Douglas Hays
Blocked By: Blocking:

Description

Load http://archive.dojotoolkit.org/dojo-2009-11-05/dojotoolkit/dijit/tests/form/test_Select.html in IE 8. Tab to the "Long List" select and press down arrow to open the list. Press the down arrow, and notice that when you down arrow past Georgia, the list does not scroll. The user can not see all of the selections.

This works correctly in IE 6, Firefox 3.5 and Safari 4.

Attachments (1)

10275.patch (476 bytes) - added by Douglas Hays 10 years ago.
possible fix that focuses a TD just before focusing the TR of a menuItem

Download all attachments as: .zip

Change History (6)

Changed 10 years ago by Douglas Hays

Attachment: 10275.patch added

possible fix that focuses a TD just before focusing the TR of a menuItem

comment:1 Changed 10 years ago by Douglas Hays

Owner: set to bill
Priority: normalhigh

This is a problem with MenuItem?. Item widgets are focused but IE8 doesn't feel it necessary to do a scrollIntoView on a TR node. One solution would be to call scrollIntoView but this causes a small background flash of the highlighted item when scrolling the list. Focusing a TD node before focusing the TR fixes the problem without adding the slightly annoying flash.

comment:2 Changed 10 years ago by Douglas Hays

WebKit? browsers are also misbehaving but differently. When you scroll up or down off the end of the list, then the current focused item jumps to the center of Menu. This can be fixed by adding

dijit.scrollIntoView(this.domNode);

to MenuItem?'s focus method before actually switching focus. Technically this fixes the original IE8 problem as well but causes the weird flickering in IE8 only that the patch avoids with the extra focus. It might be better to add a isWebKit test before the scrollIntoView and a isIE 8 test before the extra focus to limit unknown side-effects.

comment:3 Changed 10 years ago by bill

Milestone: tbd1.4
Summary: select: long list of items does not scroll properly in IE 8Select: long list of items does not scroll properly in IE 8

We used to focus the <td> but it was changed to the entire row in #6858. There's no explanation in the ticket but I'm pretty sure it was for aesthetic reasons.

So, anyway, your patch looks good to me (probably with the if() statement to limit unknown side effects).

As for webkit, I'm not sure I'd consider the current behavior a bug; you can see the same scrolling behavior (jumping to the middle of the screen) on a plain HTML page like http://www.w3schools.com/html/html_forms.asp. Although, a native <select> on webkit has smooth scrolling. I could go either way.

Anyway, I'll check in the fix for IE8, thanks for that.

comment:4 Changed 10 years ago by bill

Resolution: fixed
Status: newclosed

(In [20743]) Fix dijit.form.Select/IE8 problem where long drop down list doesn't scroll properly via the arrow key. Fixes #10275 !strict. Thanks to Doug for the fix.

comment:5 Changed 9 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.