5

Check out my code sample here: http://pastebin.com/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.net/XacfX/

Thanks
Mustafa

Mustafa Shabib
  • 798
  • 12
  • 35
  • Some things to try come 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 combobox](http://jqueryui.com/demos/autocomplete/#categories) and replace the select; save yourself some trouble ;) – Kato Dec 27 '11 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 Dec 27 '11 at 21:35
  • 1
    since you posted your code it would have been better to post it on jsfiddle.net so that we can test it – redmoon7777 Jan 08 '12 at 02: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 Jan 08 '12 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 Jan 09 '12 at 16:13

3 Answers3

4

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

http://jsfiddle.net/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.

Bay
  • 205
  • 2
  • 14
  • I agree. Using key events doesn't seem right on a select element. – Andrew Jan 08 '12 at 20:16
  • Also I often find the value the user selected with `$('select option:selected').val();` – Andrew Jan 08 '12 at 20:19
  • Not sure how using change() would solve my problem - change is only fired after you select a new option in the list. The question I posted is asking how you can get a select list with optgroups to select the option that matches whatever you've typed on your keyboard **when the select box is expanded**. This works fine when the select box is compact but not expanded on Chrome - browsers seem to differ in how they handle this behavior. – Mustafa Shabib Jan 09 '12 at 16:12
  • Finally I understood what you are trying to do. Strangely it's partly working in Chrome on Windows 7. I can select options with the dropdown list closed and opened. However, from a usability point of view, it doesn't make much sense to me to be able to type something I don't know if it exists or not. Then again, I don't know the full application. – Bay Jan 09 '12 at 18:45
3

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.

Francisco Aquino
  • 9,097
  • 1
  • 31
  • 37
  • 2
    Only if you set size > 1 will the key events trigger, but it also has the effect of no longer rendering as a drop down and instead renders as a sort of list box. Thanks for the idea, though... very strange. – Mustafa Shabib Dec 29 '11 at 17:22
3

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

http://www.devirtuoso.com/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 :)

bardiir
  • 14,556
  • 9
  • 41
  • 66