Question

I’m using the jQuery chosen plugin ( http://harvesthq.github.com/chosen/ ) on one of my forms and all is well.
However when I hit the page with IE7, it sometimes leaves the dropdowns open, as if they have gotten keybord focus.
I want to make sure they never open until the user clicks, so have tried various fixes such as these to remove focus from the selects when the page loads:

$('#mySelect').trigger('blur');
$('#someOtherInput').focus();
$('body').trigger('click');

And variations thereof, but nothing seems to help.
I don’t know if .chosen() can accept a callback, if so then I will put the code there but so far another possibility is that these lines are executing before chosen has finished doing what it does.

So, leaving out a timeout (which I really don’t want to do but will if it’s the only solution) does anyone know how I can stop this happeneing?

Answer 1

I’m not sure why this didn’t work, but I’ve found a workaround to whatever the problem was.

This line:

$('#mySelect').chosen();

Was at the top of my script, a few hundred lines of code with other plugins used that also did stuff with the inputs follows.

Moving this line to the end of the script fixed this issue – I’m guessing that something must have either conflicted with this or changed a property while this was changing the same property – but I couldn’t guess which plugin or where it was happening.

This works but I’m none the wiser as to what the problem actually was 🙁

UPDATE:
A related problem appeared today on IE7, which made the drop downs appear behind each other if you have a chosen select close to another one.

This fixes it:

$('.chz').chosen();                 
var zidx = 100;
$('.chzn-container').each(function(){
    $(this).css('z-index', zidx);
    zidx-=1;
});

UPDATE by BigM

There is one more thing you’re going to need to do, and that is setup the opacity for IE5-7 like this for when it’s disabled:

.chzn-disabled {
  cursor: default;
  opacity:0.5 !important;
  filter: alpha(opacity=50) !important;
}