Automatic opening of select box

Question

I downloaded a jquery plug in for select boxes here: http://harvesthq.github.io/chosen/

Everything works fine on my page except, on one of my pages, the select boxes are placed in a jquery dialog window, which opens upon button click. The problem Im having is, that upon clicking the button, the dialog opens correctly, but it immediately places focus on the first select field, which I dont want.

If I place it on the page it works fine, doesnt open upon loading. I found a similar issue and a possible solution here:

http://jsfiddle.net/6Xa78/3/

$( "#dialog" ).dialog({
    autoOpen: false,
    show: {
        effect: "puff",duration: 500
    },
    hide: {
        effect: "puff",
        duration: 500
    },
    height: 1000, 
    width: 1000,
    position:['middle',30],
    open: function(){
        $('.my_select_box', this).chosen();
    }
});
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});

but even though I use the exact same code, it still does it. I also tried to delete the first select box and it then automatically opened the second one - in other words, it always opens the first select box. I also tried replacing the class by id, but that had no effect, no effect also had trying the focusout command or blur command. It always opens upon opening the dialog...

My page is here:

http://meteopage.com/climate/climate_map.php

Try clicking on the button "Filtr", which opens the dialog and you will see the first select box immediately pops up.

Answer 1

This is happening because of focus on first input. Try creating a dummy element as first input in dialog box.

<input type="hidden" autofocus="autofocus" />

here is reference . Hope it helps too.