none
IE7 closes dropdownlist if style changed via javascript

    Question

  • Hi,

    I already posted this question to microsoft.public.internetexplorer.general 2 weeks ago, but got no answer. I'm not sure if I'm right here, but I'll try.

    I have to change the backgroundColor of a dropdownlist on focus. And if you
    leave it (onblur), the color has to change back again. Unfortunatelly IE7
    closes the DDL when you change the cssClass or style.backgroundColor

    You can see it easily with this html page:

    <script language="javascript">

    function SetClass(obj, valid)
    {
      window.status = 'Gonna change backgroundColor ...';

      window.setTimeout(function() {
          if(valid)
          {
            obj.style.backgroundColor = "green";
          }
          else
          {
            obj.style.backgroundColor = "red";
          }
          window.status = 'Changed backgroundColor';
        }, 2000);
    }

    </script>

    <select name="DDL1" id="DDL1" onblur="SetClass(this, true)"
    onfocus="SetClass(this, false)">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    </select>


    I wanted to do only the if(){} part in the function. The window.status and
    setTimeout is only to show better, when the DDL is closed again.

    When you click the DDL, it is opened and all list items are shown. Two
    seconds later, the backgroundColor is changed. This closes the DDL in IE7. In
    IE6 and Firefox this works and the DDL remains open.

    Has anybody seen this problem? Is it a known bug? Will it be changed?

    Thanks,
    Michael

    Thursday, January 04, 2007 10:00 AM

All replies

  • Hello,

    Just letting you know that I have confirmed the behaviour you are seeing. Changing the background colour using javascript through the onfocus/onclick event does not cause the drop down list to close when using IE6. The behaviour does seem to have changed on IE7.

    I will look into this a bit more and get back to you as soon as possible.

    Regards,

    Wesley

    Thursday, January 04, 2007 5:14 PM
  • Hello again,

    This bug has been logged and will be filed for consideration in a future release. In the meantime, although the following suggestion is not a perfect alternative it may help as a workaround: simply use the onmousedown event in place of the onclick/onfocus event. I have confirmed that using onmousedown to change the background colour of the control in IE 7 does not close the drop down list.

    Hopefully this works for you.

    Regards,

    Wesley

    Monday, January 08, 2007 5:41 PM
  • Current SELECT design forces dropdown to be closed up when style or content changed. We're considering improvement in next version.
    Tuesday, January 09, 2007 2:59 AM
  • Thanks. I'm not sure if onmousedown will help. The colour should be changed if you activate the DDL per keyboard (tab) too. Anyway, I'll try it.

    Cheers,

    Michael

    Wednesday, January 10, 2007 7:31 PM
  •  

    Try using the onfocusin event instead of the onfocus to call SetClass

    Thursday, January 25, 2007 9:20 AM
  • Hi,

    This bug also occured for me in my recent project, but onmousedown worked just fine as a bypass. Thanks a lot.

    Regards,

    Jorn

    Monday, February 05, 2007 5:04 PM
  • I am expieriencing the same problem in a Sharepoint context:

     

    I have a dropdown with a javascript event attached to it, the event fetches the data via a webservice and populates the dropdownlist via javascript. When i clcik the dropdown it closes immediately, I tried using onmousedown put the problem persists.

     

    In firefox my functionality is working fine,

     

    Regards,

    Lou

     

    Tuesday, July 08, 2008 10:01 AM
  • Wesley,

     

    I take it this is still an open issue?

     

    Did anyone ever get to the bottom of it?  I see some question here (and elsewhere) about the onmousedown event as a solution....

     

    It's looking like our group will have to make a fairly extensive fix related to this, so we're looking for a solid answer. 

     

    No hope for an IE patch of some kind?

     

    Paul

    Friday, July 25, 2008 8:14 PM
  • This issue still occurs in IE8 Beta 1, so I wouldn't expect any patch for this.

    They know it is a bug, but they've shown little, if any interest in fixing it.

    Sorry.
    Friday, July 25, 2008 8:35 PM
  • I'm also trying to understand the exact nature of the bug, with or without a fix.

     

    Can anyone enlighten me?

     

    Does it have to do precisely with changing any style parameters using any event handler in connection with a drop down, no more or less?  Any other detail available?

    Monday, July 28, 2008 8:43 PM
  • Dear Sir,

     

    One of my web applications is affected by this IE7 bug.

     

    About 18 months ago you stated the IE7 bug "has been logged"

    > Could you provide the log reference of this specific bug ?

     

    The bug was "to be filed for consideration in a future release"

    > Could you explain what this means ? Who's taking action ?

     

    Best regards,

     

    Rik

    - doing web projects/analysis/dev

    Friday, August 29, 2008 1:27 PM
  • Yeah you confirmed that the the dropdown does not close unfortunately the selection you make does not reflect the actual selection the user makes. Did you try that?

    For example, if you have a default of foo, you select the list which you change colors with onmousedown and present another option say bar. You select bar the dropdown closes but yet foo, which is the default, is still selected.

    The problem still remains with IE 8 as well!

    God IE is such a ^*&^(*&^T to work with.
    Friday, October 31, 2008 6:59 PM
  • I was bitten by this bug in IE8 (8.0.6001). It tied me up for hours before I found this web page and learned that it was a known (filed) bug.
    What is being done to address the problem? Is there a place where we can track the status of this bug, or vote for it to be fixed?

    onmousedown does not provide a workaround in my case.
    I have a parent div, which uses onmouseover / onmouseout events to change the div's class, which affects its opacity.
    When I click on the select dropdown it opens, then move the mouse downward in preparation for clicking on one of the options, the onmouseover event of the parent div fires; it changes the div's class, which apparently causes the dropdown to close. As a result, one cannot change the dropdown's value with the mouse!

    My code:
    <div onmouseout="javascript: dojo.addClass(this, 'seeThrough');"
        onmouseover="javascript: dojo.removeClass(this, 'seeThrough');"
        class="seeThrough" id="divLayers">
      <div>
        <span id="baseLayerSpan">Base layer: </span>
        <select onchange="changeBaseLayer(this.selectedIndex)" id="baseLayerSelect">
          <option selected id="default">Plain</option>
          <option ...
    • Edited by HuttarL Tuesday, December 15, 2009 9:12 PM formatting problem
    Tuesday, December 15, 2009 7:52 PM
  • I am in the same boat as HuttarL .. is there a workaround for this?
    Grand...
    Friday, January 22, 2010 1:10 PM
  • This bug still exists in IE9.

    Was trying the following:

    Javascript:

    function showTooltip(control) {
        var ttext = control.title;
        var tt = document.createElement('SPAN');
        var tnode = document.createTextNode(ttext);
        tt.appendChild(tnode);
        control.parentNode.insertBefore(tt, control.nextSibling);
        tt.className = "tooltipCss";
        control.title = "";
    }

    function hideTooltip(control) {
        var ttext = control.nextSibling.childNodes[0].nodeValue;
        control.parentNode.removeChild(control.nextSibling);
        control.title = ttext;
    }

    ASP.Net:

            

        <asp:DropDownList runat="server" ID="DropDownListTest" >

            <asp:ListItem runat="server" Text="ddddddd" Value="d"></asp:ListItem>
            <asp:ListItem runat="server" Text="ccccccc" Value="c"></asp:ListItem>
            <asp:ListItem runat="server" Text="bbbbbb" Value="b"></asp:ListItem>
            <asp:ListItem runat="server" Text="aaaaaa" Value="a"></asp:ListItem>

        </asp:DropDownList>

    Code Behind (c#):

        protected void Page_Load(object sender, EventArgs e)
        {
            DropDownListTest.Attributes.Add("onmouseover", "showTooltip(this)");
            DropDownListTest.Attributes.Add("onmouseout", "hideTooltip(this)");
            DropDownListTest.CssClass = "DropDownListError";
            DropDownListTest.ToolTip = "BLAH BLAH BLAH";
            //DropDownListTest.ToolTip = "";
        }

    Works perfectly in Firefox, Chrome and IE 6.

    NOTE: I got this working just by changing onmouseout for onblur... it's not the exact same functionality but I'll live with it.

    Wednesday, August 15, 2012 1:43 PM