Dialog: Save the active element that opened the dialog and restore focus to that. Fixes #8730 - Dialog: Restore focus to opener.

Author: jzaefferer

tests/visual/dialog/complex-dialogs.html

@@ -22,13 +22,13 @@
 
 	<script>
 	$(function() {
-		$( "#dialog" ).dialog({
-			modal: true,
-			height: 300,
-			width: 500
-		});
+		var dialog = $( "#dialog" ).dialog({
+				modal: true,
+				height: 300,
+				width: 500
+			}),
 
-		var datepickerDialog = $( "#dialog-datepicker" ).dialog({
+			datepickerDialog = $( "#dialog-datepicker" ).dialog({
 				autoOpen: false,
 				modal: true
 			}),
@@ -39,6 +39,10 @@
 				width: 600
 			});
 
+		$( "#open-dialog" ).click(function() {
+			dialog.dialog( "open" );
+		});
+
 		$( "#open-datepicker" ).click(function() {
 			datepickerDialog.dialog( "open" );
 		});
@@ -70,6 +74,8 @@
 
 <a href="#">Outside link</a>
 
+<button id="open-dialog">Reopen dialog</button>
+
 <div id="dialog" title="Basic dialog">
 	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
 	<p><button id="open-datepicker">Open another window with a datepicker.</button></p>

ui/jquery.ui.dialog.js

@@ -248,6 +248,13 @@ $.widget("ui.dialog", {
 			this.overlay.destroy();
 		}
 
+		if ( !this.opener.filter( ":focusable" ).focus().length ) {
+			// Hiding a focused element doesn't trigger blur in WebKit
+			// so in case we have nothing to focus on, explicitly blur the active element
+			// https://bugs.webkit.org/show_bug.cgi?id=47182
+			$( this.document[ 0 ].activeElement ).blur();
+		}
+
 		if ( this.options.hide ) {
 			this._hide( this.uiDialog, this.options.hide, function() {
 				that._trigger( "close", event );
@@ -278,6 +285,8 @@ $.widget("ui.dialog", {
 			options = this.options,
 			uiDialog = this.uiDialog;
 
+		this.opener = $( this.document[ 0 ].activeElement );
+
 		this._size();
 		this._position( options.position );
 		uiDialog.show( options.show );