IE7 Dropdownlist not displaying on 1st click following className change onfocus

I am trying to change the CSS class of a dropdownlist on its onfocus event to change its background colour.

When the user clicks on the the dropdownlist, the CSS class is changed (the backgound colour i开发者_如何学JAVAs changed), but the list of options is not displayed until it is clicked again.

This is happening in IE7. It works fine in Firefox.

The only advice I have found anywhere on this problem suggests also using the onfocusin event:

http://www.eggheadcafe.com/software/aspnet/34297064/open-dropdown-list-only-with-double-mouse-click.aspx

but this did not have any effect.

The onfocus event is attached to the dropdownlist in the code behind:

ddl.Attributes.Add("onfocus", "setCssClass();");

The javascript the sets the class:

ddl.className = "Class1";

Please help!

Thanks to anybody who looked at this, but I have found the answer myself.

The problem was only occuring when the focus was coming from a few particular controls. These controls had onblur events that also set the class of the dropdown.

I had assumed that these onblur events would run before the onfocus/onfocusin, but it seems that this is not the case. The onblur events then seem to close the dropdownlist when applying the class change.

Anyway, I now check which control has the focus on these onblur events, and if it is the dropdown list, I don't run the main logic within the onblur and all now works as expected.

Putting in a hard coded "onfocus" event will force you to have 2 clicks when using Internet Explorer. It's a known quirk with IE. Although this solution isn't perfect. If you have an alert for example inside this anonymous function in the .focus() callback, you still have to click the dropdown twice. You just have to get creative.

As a workaround, just use the jQuery .focus event.

jQuery([dropdownlist object]).focus(function() {

 ... put code here

});