Question

I am having a strange problem with my Jquery UI Dialog in opera. In all other browser the code works fine, including IE 8, but for some reason in Opera I have to use the tab button to select a field inside my dialog. I can’t use my mouse to select a field!

Update: I have this issue with Firefox as well! So it wasn’t just opera. It definitely works fine in Chrome & IE. I can’t select any of my input fields. Anybody know how I can get normal focussing back on my html elements?

//Build the dialog
    function createActivityDialog() {
        var dropdown, activitydialog, timepicker, i, stageid;

        timepicker = "<select name='dialogbegintime' id='dialogbegintime'>";
        for ( i = 0; i < $("#times li").length; i = i + 1) {
            timepicker += "<option value='time" + i + "'>" + hourArray[i] + ":00" + "</option>";
        }
        timepicker += "</select>";

        dropdown = "<select name='podia' id='podia'>";
        for ( i = 0; i < $(".tr").length; i = i + 1) {
            stageid = $(".tr").eq(i).attr("id");
            dropdown += "<option value='" + stageid + "'>" + $(".th").eq(i).html() + "</option>";
        }
        dropdown += "</select>";

        activitydialog = $('<div></div>').html("<p id='dialogTip'>Voer hier een nieuwe activiteit in:</p><br />" + "Naam: <input type='text' name='activityName' id='activityName' /><br />" + "Selecteer een begintijd:" + timepicker + "<br />Selecteer het podium: " + dropdown).dialog({
            autoOpen : false,
            title : 'Activiteit Toevoegen',
            height : 300,
            width : 350,
            modal : true,
            close : function() {
                $(this).remove();
            }
        });
        return activitydialog;
    }

//Call/Open the dialog

$("#SomeForm").submit(function(event) {
    var mydialog;
    mydialog = createActivityDialog();
    mydialog.dialog('open');
    mydialog.dialog("option", "buttons", [{
        text : "Ok",
        click : ActivityDialogOk
    }, {
        text : "Cancel",
        click : function() {
            $(this).dialog("close");
        }
    }]);
    event.preventDefault();
});

HTML:

<form id="SomeForm" method="post">
    <button type="submit" name="addActivity">
        Add
    </button>
</form>

Answer 1

Ok. So I figured where is the problem: $(document).disableSelection(); — comment this out and all will work fine.

jQuery UI dialog opens first tabbable element so first input is focused, but due disableSelection on whole document causes that you can’t focus field with mouse.