I am going crazy. Select box inside a dropdown menu div makes my dropdown menu div disappear when I use the select box — how do I stop this?

Question

Simple example here: http://jsfiddle.net/ycHgg/1 Try this in IE 7, 8 or 9. Click on select box inside the dropdown div and then try selecting the number "3" -- the entire dropdown div will disappear. How do you stop this from happening and have the dropdown div remain open? Detailed post below.

---

First, this seems like such a non-issue, I can't believe it is even a problem. But it is so I tried googling for it. Found nothing that relates directly but it's such a simple concept, I can't believe an answer isn't out there.

So here's the situation. I have a div and this is my dropdown menu. I have a onmouseover and onmouseout to trigger displaying and hiding this div. I have tried display, visibility, and now I'm using 'left' to position it -9999px and then back to -5px to hide and show it. All of these work fine so it doesn't appear to matter which I choose to use. However, I also have an input textbox inside this div. I found that if I used display:none to hide the div, hovering over the input textbox caused the entire div to disappear suddenly in Chrome. Using either 'left' or visibility no longer causes this problem to happen, so I've stuck with using 'left'

Now the problem is this: I have a select in this div. When I click on the select box, it's fine. Perfect. When I move my mouse pointer into the layer that shows my select box items, the whole div disappears along with the select, textbox, etc. Poof, just suddenly aborts, it all disappears. I need to mention that this problem occurs in IE. All versions from 7 to 9. When I tried googling for this ("select box IE bug menu disappears"), I just get results about a totally different issue documented here:

http://www.javascriptjunkie.com/?p=5

This is not my problem though. According to this page, there is a widespread IE6 bug made select boxes show through any divs that appeared above them, no matter what. According to other sources, this happens because the select box is treated like a windowed element and will appear on top of everything no matter what (but that this is fixed in IE 7). And this page tells you how to get around this. That's fine but my problem is that the select box is inside the div itself, and when you click on the select box to use it and then move your mouse down in it to select an item, it disappears - div, select, textbox, and all. And it happens on IE 7 to 9. Again, the only javascript that is used is onmouseout and onmouseover to position the div so that it is at left:-9999px and then left:-5px respectively to hide and show it. Nothing fancy here, yet this still happens.

The structure is fairly basic:

<a href="#" onmouseover="display('menu');" onmouseout="hide('menu');">Nav Item</a>
<div id="menu" onmouseover="display('menu');" onmouseout="hide('menu');">
  <form>
    <fieldset>
      <label>Hello</label>
      <select> ... </select>
    </fieldset>
  </form> 
  .... 
</div>

The ellipses inside the select are just the select option items, the ellipses outside of the form are the other elements inside the dropdown menu, consisting of various divs and ul's and tables. All floated left, I believe. I don't think any of that affects this select box problem though. The anchor hides/shows the div, and the div itself has the hide/show as well (if user moves mouse starting from inside div to outside the div, it should hide)

Is it possible that the select box is still a windowed element and is messing things up for this? I read this was fixed in IE 7 but maybe only for the case presented in that blog post (div is shown on top of the select) instead of if the select is inside the div itself? But the issue is that usage of the select box makes the whole div go away so this sounds different. However, the select being a 'windowed' element makes me think that by mousing over it, the div thinks the mouse is outside now so it moves left:-9999px instead of staying open and staying at left:-5px. I tried looking for other sites that use a select inside a dropdown menu div and only found one example, which really surprised me. If you go to http://www.walmart.com and hover over "Store Finder", you can see the dropdown menu div appear and the State field is a select. It works fine there but can't figure out how they do it.

Has anyone on earth experienced this problem? Can anyone recreate it themselves and see that I'm not crazy? I seriously seriously appreciate the help, I've been banging my head against the wall for a couple days straight now.

Answer 1

well.. it seems that there's a problem on IE (as usual)... the "over" event on the select does not propagate the event to the parent div..

After reading the code on walmart.com.. i saw that they add a "click" event on the select to prevent the parent from disappearing.

I was able to replicate that code using mootools, check this http://jsfiddle.net/xA4fp/3/

HTML

<div id="wrapper">
<a href="#" >Nav</a>
<div id="menu" >
    <form>
        <fieldset>
            <label>hello</label>
            <select id="optionslist">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </fieldset>
    </form>
    </div></div>

JS

addBoxEvents();
var activeForm = false;

$("optionslist").addEvent('click',function(E){
    activeForm = true;
});

$("optionslist").addEvent('blur',function(E){
    activeForm = false;
});

function addBoxEvents(){
  $('wrapper').addEvent('mouseout',function(E){
     if(!activeForm){
         $('menu').setStyle('visibility','hidden');
    }
  });

  $('wrapper').addEvent('mouseover',function(E){
     $('menu').setStyle('visibility','visible');
  });
}

even if you dont know mootools, the code is easy to understand, so you'll get the main idea.. basically i use a state variable called "activeForm" on the mouseout event and i change that variable when the user clicks on the select or when the select looses focus...

it might not be working perfectly, but it's a start... i've tested it on IE9

Good Luck!

Answer 2

It does sound like mousing over your select element is firing the onmouseout event of the div, and therefore positioning it to left:-9999px. Have you tried adding an onmouseover event to the select element that positions the div correctly (ie. left:-5px)?