jQueryUI autocomplete not working with dialog and zIndex

Question

I ran into an interesting issue with jQueryUI autocomplete in a dialog box.

My dialog HTML looks like this:

Answer 1

Changing the z-index only works the first time the drop-down is opened, once closed, the dialog window realizes it has been "tricked" and upgrades its z-index.

Also for me changing the order of creation of the dialog and auto-complete really was a hassle (think big web site, tons of pages) but by chance I had my own openPopup function that wrapped openedDialog. So I came up with the following hack

$("#dialog").dialog({ focus: function () {
    var dialogIndex = parseInt($(this).parent().css("z-index"), 10);
    $(this).find(".ui-autocomplete-input").each(function (i, obj) {
        $(obj).autocomplete("widget").css("z-index", dialogIndex + 1)
    });
});

Each time the dialog has the focus i.e. on 1st opening and when the auto-complete is closed, each auto-complete list's z-index gets updated.