Bug 25051 – Optgroup in select breaks keyboard navigation.

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: Forms

[Alexander Ljungberg]

When the <optgroup> tag is used, keyboard navigation does not work in a select drop down if the drop down is opened. Keyboard navigation still works if the drop down is in its closed state.

Tested on build 530.5+.

The attached test case demonstrates the problem. There are two select drop downs in the page. The first one contains an optgroup, the second one does not. Everything else is equal. To reproduce the problem:

Incorrect result:
1. Click the first drop down to bring up the popup with selections.
2. Type "I" on the keyboard.
3. The choice "Zenbe" is highlighted.

Correct result:
1. Click the second drop down bring up the popup with selections.
2. Type "I" on the keyboard.
3. The choice "Infinity Internet" is highlighted.

[Alexander Ljungberg]

Created attachment 29258 [details]
Reduced test case to demonstrate select keyboard acceleration problem.

First select box works incorrectly, second works correctly when selecting items through typing on the keyboard with the select popup open.

[Anthony Ricaud]

Confirmed with r42369.

[Reid Beels]

Confirmed in r78528

[Alexander Kahn]

I think fixing this would be a great improvement. This trips me up a lot.

[Robin Stocker]

Confirmed in Chrome 14.0.797.0 dev. Firefox behaves correctly by the way (maybe that is a motivation).

This is really annoying. Even Internet Explorer (checked with version 9) handles this correctly. That's quite embarrassing, huh? Please fix this soon! Thanks a lot!

[Alexey Proskuryakov]

*** Bug 89644 has been marked as a duplicate of this bug. ***

[Peter Ostrander]

Experiencing this same problem across Webkit browsers. I've created a jsfiddle that displays the issue. 

http://jsfiddle.net/peterostrander/dtt9L/

[Peter Ostrander]

It also appears that this only occurs when an optgroup has nested options inside it. If optgroups are present in the select, but none of them contain nested options, then keyboard navigation works correctly.

[fr0d0z]

A workaround using jQuery can be found here:
http://stackoverflow.com/questions/8829451/bug-in-select-optgroup-using-keyboard-accelerators-in-webkit

Would love to see a fix for this though :-)

[Benjamin Poulain]

It seems to work now. I just tried with WebKit trunk on Mavericks and I can navigate when the popup is up.

[Alexander Ljungberg]

I can confirm this is resolved, even in vanilla Safari 7.0.2.