CODEWITHSUNDEEP
drop-down-menuclickdouble
JustBeingHelpful
JustBeingHelpful

Reputation: 18980

Why does an ASP.NET DropDownList control requires two clicks to expand in Internet Explorer

I have an ASP.NET DropDownList control that renders into a dropdown list (select HTML tag) on a page. For some reason, when I'm in Internet Explorer, it requires two clicks for me to open it up and see the options, which is just an extra click for the end-user. It works fine in Google Chrome, Mozilla Firefox and Safari--I only have to click once to see the options for a selection. Why would it not work correctly in IE? And more importantly, how can I fix it in IE?

Here is my code:

<asp:DropDownList id="DDLClientName" runat="server" EnableViewState="False" AutoPostBack="True" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)">

Upvotes: 3

Views: 3422

Answers (2)

Flea
Flea

Reputation: 11284

I had this same problem and this is due to how IE 10 handles onFocus, it treats the first focus as a click. What I did to fix it was bind the mousedown event to the click event. Then, you can run whatever code you need in the click event.

// if IE 10          
if (navigator.userAgent.indexOf("MSIE 10") > 0) 
{
   $("#InvoiceTypeDropDown").bind('mousedown',function(event) {
       $(this).trigger('click')
    });
}

So my complete code looked like this:

if (navigator.userAgent.indexOf("MSIE 10") > 0)
{
                $("#InvoiceTypeDropDown").bind('mousedown',function(event) {
                $(this).trigger('click')
                });
                $("#InvoiceTypeDropDown").click(function () {
                     if ($(this).val() == '') {
                         $(this).css("color", "black");
                         $(this).css("font-style", "normal");
                     }
                 });
}

Upvotes: 0

JustBeingHelpful
JustBeingHelpful

Reputation: 18980

Had to remove the hard-coded onfocus event. IE handles the first click for the focus event, and the second to expand the dropdown. I guess this is a known quirk with IE along with the other 400+ quirks.

I am still trying to figure out a way to change styles of the dropdown on focus. Depending on what code you put into this callback anonymous function, you may still need to click the dropdown twice in IE. I've found that you can monkey with other controls, inside this function and it doesn't require two clicks. I'll keep this as the answer for now. I guess because of Microsoft we can't use the onfocus at all on dropdowns. I may try using an actual select tag rather than using Microsoft's ASP.NET DropDownList, and see if I can use the onfocus event then, without the extra click. I doubt it.

jQuery(this.Elements.DDLClientName).focus(function() { .. put code here });

Upvotes: 3

Related Questions