JQuery select box focus problem in internet explorer

Question

In the following ".input" matches with a tag.

The code works fine in all browser except in internet explorer where I need to click on a select box twice to get the dropdown.

$(".input").focus(function () {
var rc = $(this).parents(".rc-input");
rc.removeClass("rc-input-default");
rc.addClass("rc-input-active");
});

If I use mousedown instead of focus it work, but the I don't get the desired effect when tabbing?

<div class="rc-input">
   <select class="input">
   ...
   </select>
</div>

Answer 1

From jQuery documentation:

The focus event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the focus event will not work consistently across browsers.

Answer 2

You could handle both mousedown and focus.

Answer 3

It's a bug in IE. When you make any change to a select box in IE prior to version 8 (including indirect style changes via changing class names) it recreates the underlying Windows dropdown widget, which has the side-effect of resetting it to a closed state.

On IE6-7, as a workaround, you can use onfocusin instead of onfocus; as this happens before the select is focused, the restyling doesn't close the control. Or just use a simple CSS :focus rule in preference to class-changing, and let IE6-7 users forgo the input highlighting. (They don't deserve the pretties!)

See this answer for example code combining these approaches.