jQuery UI multiple dialog box contents jumping to the top

Question

If you have multiple jQuery UI dialog boxes open on a page with enough content to force a scroll bar, clicking between dialogs causes the content of the one that was active to scroll to the top.

You can see this JSFiddle for an example (one box is behind the other): http://jsfiddle.net/kRAd4/ If you scroll them both down a little and then click from one box to the other you'll see it happen.

Is there any way to stop this?

Here is the code used on the JSFiddle site, it's simple:

HTML:

<div class="hi">Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br /></div>

<div class="hi">Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br />Here<br />Is<br />A<br />Lot<br />Of<br />Text<br /></div>

Javascript:

$(".hi").dialog({
    height: 200
});

UPDATE: I've tried adding return false to both the mouseDown and focus dialog options, and it made no difference.

Answer 1

Same as Jared, I found that page that describes the bug you're having. It indeed talks about 1.9.2 working fine.

However, most of the time you do not roll back to previous versions on your project and I wanted to find a solution that keeps your current files. Therefore, I tested with some code presented there. I made an html page with your jQuery 2.0.2 version and jQuery UI 1.10.3 version.

The following solution fixes your problem, but I would use it only if you're sure there would be no other repercussions, or if you've tested it and are satisfied with the result.

I replaced the _moveToTop function in the jQuery UI file (the entire chunk) with this piece of code (you can find it in the same link here):

_moveToTop: function( event, silent ) {
    var $parent = this.uiDialog.parent();
    var $elementsOnSameLevel = $parent.children();

    var heighestZIndex = 0;
    $.each($elementsOnSameLevel, function(index, element) {
        var zIndexOfElement = $(element).css('z-index');
        if (zIndexOfElement) {
            var zIndexOfElementAsNumber = parseInt(zIndexOfElement) || 0;
            if (zIndexOfElementAsNumber > heighestZIndex) {
                heighestZIndex = zIndexOfElementAsNumber;
            }
        }
    });
    var currentZIndex = this.uiDialog.css('z-index');

    var moved;
    if (currentZIndex >= heighestZIndex) {
        moved = false;
    } else {
        this.uiDialog.css('z-index', heighestZIndex + 1);
        moved = true;
    }

    if ( moved && !silent ) {
        this._trigger( "focus", event );
    }

    return moved;
},

Answer 2

It looks like this is a bug in jquery UI 1.10, reported here. In your fiddle, if you change jquery to 1.9.1 and jquery ui to 1.9.2, it works. According to the bug report, it's fixed in 1.11 as well.