Check out my code sample here:

The gist is: If you have a select box expanded (either via the keyboard or mouse), jquery's key events do not seem to fire - at least not in Mac Chrome.

Are there any workarounds?

My end goal is to select what the user has typed while the select box is expanded when using the optgroup element.

edit:

jsfiddle link: /

Thanks
Mustafa

Check out my code sample here: http://pastebin./D1ZctG11

The gist is: If you have a select box expanded (either via the keyboard or mouse), jquery's key events do not seem to fire - at least not in Mac Chrome.

Are there any workarounds?

My end goal is to select what the user has typed while the select box is expanded when using the optgroup element.

edit:

jsfiddle link: http://jsfiddle/XacfX/

Thanks
Mustafa

• javascript
• jquery

• 1 Some things to try e immediately to mind: does the event bubble up? Can you wrap the select in a div and capture them there? Are you using keydown, keyup, or keypress? Try all three? Better yet, why not just use a bobox and replace the select; save yourself some trouble ;) – Kato Commented Dec 27, 2011 at 21:33
• On line 11 you have $(this).attr("id"); but 'this' would be 'e'. Also, you might consider using console.log to announce the event being fired in your debugger. – Todd Baur Commented Dec 27, 2011 at 21:35
• 1 since you posted your code it would have been better to post it on jsfiddle so that we can test it – redmoon7777 Commented Jan 8, 2012 at 2:18
• If anyone could show the absolutely simplest workaround to this problem, I'd be happy to give them a bounty of 50 reputation points. By simplest I mean the least amount of code which solves the problem (while still preserving the grouping). – Magne Commented Jan 8, 2012 at 19:26
• I'm pretty certain that the "best" workaround that would work across all browsers would be replacing your select boxes w/ optgroups with a javascript implementation that uses divs and lists, or something along those lines. – Mustafa Shabib Commented Jan 9, 2012 at 16:13

3 Answers 3

I think you have to use jQuery's change():

http://jsfiddle/vvBqE/11/

Unless I misunderstood you, you can see which option the user has selected this way. You can also use the key events in my example but the callback function won't be triggered if the user selects an option by using mouse only.

Buggy indeed, I can't find an explanation anywhere but it seems related to the fact that the browser will render the dropdown popup even outside the browser window (try to make your browser really small and open your dropdown, it leaves the boundaries), making it not a typical document element.

One work around is to add a size on the dropdown

<select name="sel_id" id="sel_id" size=5>
  <option value="0">Choose a new fixer...</option>
    <optgroup label="Group A">
    <option value="6366">Test User useruser</option>
  </optgroup>
  <optgroup label="Group B">
    <option value="5831">First Guy</option>
    <option value="1123">Second Guy</option>
    <option value="7232">Second Second Guy</option>
  </optgroup>
</select>

$(document).keypress(function(e){
    console.log(String.fromCharCode(e.keyCode));
});

I am sure some DOM experts around can give some light on this one.

As this indeed seems to be bugged you might want to try something like this as a workaround:

http://www.devirtuoso./2009/08/styling-drop-down-boxes-with-jquery/

That would render the select box as a styled list in the end. Some tweaking to enable optgroups with that solution and voilá you got a dropdown box that is rendered inline with the page and therefore doesn't block key events.

On the upside you also get to style the dropdown any way you want :)