4

I have a dialog box designed like this:

<div id="choose_product" title="Choose a Product" style="display:none;">
    <button id="sel_1">Prod. 1</button>
    <button id="sel_2">Prod. 2</button>
</div>

with JS:

    $('#choose_product').dialog({
            autoOpen: true,
            show: "blind",
            hide: "explode",
            modal: true,
            buttons: {
                Cancel: function(){
                    $(this).dialog("close");
                }
            }
        });

When the dialog box opens up, the Prod 1 button is selected (highlighted) by default, I don't know why. You can see it on this JSFiddle. When you click RUN, you can see that the Prod. 1 button comes up selected by default. Does anyone know why this is happening? Is there something I am doing wrong?

Thanks!

** Edit **

In my application I actually use $('#choose_product').dialog("open"); to open the dialog. if you use $('#choose_product :button').blur(); right after that, then no buttons are selected by default. A slight work-around but seems to work.

See an updated fiddle.

jeffery_the_wind
  • 17,048
  • 34
  • 98
  • 160

1 Answers1

2

My assumption is that when you specify the 'modal' type for the jQuery UI dialog, it automatically focuses the first button. Also, the reason it isn't styled properly is because you did not add the css in your fiddle.

Edit: Upon more researching, I found this question that affirms what I stated above.

Community
  • 1
  • 1
chrisn
  • 2,095
  • 15
  • 20