Forcing IE to show drop downs

[Fotiman]

This example is using IE7 (not sure how other versions of IE behave).

I've got a drop down which needs to be populated dynamically when the user sets the focus on it:

<select id='foo'>
  <option value='0'>All</option>
</select>

When the use selects this element, it fetches some data from the server to get the valid options (based on other fields on the page). It then populates the select with those options. The problem, though, is that when you have a select element that is dropped down (showing the options) and you append options to that select element, IE will close the drop down. I need to find a way to keep that drop down list open, or tell IE to re-open it when it's done adding options.

Here's a code example:

window.onload = function () {
  var foo = document.getElementById('foo');
  foo.onfocus = function () {
    var op = document.createElement('option');
    op.setAttribute('value','value');
    op.appendChild(document.createTextNode('text'));
    this.appendChild(op);
  };
};

Note, my real world case is using event listeners, but for simplicity of this example, I'm just setting the event handlers instead.

Anyone have any ideas?

[coopster]

I don't have time to investigate/test but it sounds like it is losing focus. What if you apply focus to the element again?

[Fotiman]

Tried that. Setting focus doesn't actually force the drop-down to expand, it just sets the current focus to that element (you can use the down/up arrows, for example, to move through the elements).

[coopster]

All right, I figured as much. Can you trigger a different event to populate the list rather than waiting for it to receive focus?

[Fotiman]

I also tried the click event, with the same results (though in order to remain accessible via the keyboard, I think I'd need to trigger this onfocus). The issue seems to be that when the options for a select element change, IE will close the dropdown. If there were a way to tell IE to open it again, that might be one way to work around it. So far, I've not had any luck.

[coopster]

I don't know of any way to "force" a select list to open. I guess I should have asked my question a bit differently too ...

Can you trigger an event based on page load or perhaps a different element to populate the select list before the user brings focus to the list?

[Fotiman]

I think that is probably what I'm going to need to do. Either that or create my own dropdown implementation that simulates a <select> element.

[Gibble]

Had the same problem, the only viable solution is to perform the load of the drop down on mouseover, so that when you click, the data is there (assuming your drop down loads very fast)

[Fotiman]

I considered that solution as well, but you lose accessibility from the keyboard with that approach. Also, it can cause all sorts of unwanted behavior if you mouse over it, pick something, expand it again, mouse out, then mouse over... too much of a headache.

I think the approach I'm going to take is a sort of pseudo select element. That is, I'll create an input, when that item gets focus I will display a (previously hidden) select box with a fixed size on top of that input, and onblur of that select I will populate the value in the text field and hide the select again. At least, that's what I'm thinking.

[Gibble]

Good luck.

It might be simpler to write a new drop down using some UL/LI code, than pseudo elements.