Dialog moveToTop

[jdlowden]

The function moveToTop hasn't functioned correctly for years - I've found bugs and assistance requests going back to 2013 and earlier. Most are hacks to get around the functionality not brining the dialog to the top, even when requesting the moveToTop function directly it is still in-behind other items.

It is possible for any DOM element to have a higher z-index than the initial .ui-front element created by jquery-ui and can mean a dialog can hide behind elements that are already presented on the page.

I suggest the following change to the _moveToTop function which maps all DOM elements and not only ones matching .ui-front.

/ui/widgets/dialog.js

_moveToTop: function (event, silent) {
	var moved = false,
		zIndices = $( "*:visible" ).map( function() {
			return +(isNaN(z = $( this ).css( "z-index" )) ? 0 : z);
		} ).get(),
		zIndexMax = Math.max.apply( null, zIndices );

	if ( zIndexMax >= +this.uiDialog.css( "z-index" ) ) {
		this.uiDialog.css( "z-index", zIndexMax + 1 );
		moved = true;
	}

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

	return moved;
},

[mgol]

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/.

Note that having an element with a higher z-index may not necessarily display above an element with a lower z-index; this depends on the document tree structure. If you take z-index higher than any element on the page then that's likely to work but I worry about performance impact for large DOM trees. I'm not sure if we want to touch this after so many years.