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

This commit is contained in:
Jörn Zaefferer 2012-10-23 10:31:10 -04:00
parent 2a2a2c017c
commit 14691ae6fe
2 changed files with 21 additions and 6 deletions

View File

@ -22,13 +22,13 @@
<script> <script>
$(function() { $(function() {
$( "#dialog" ).dialog({ var dialog = $( "#dialog" ).dialog({
modal: true, modal: true,
height: 300, height: 300,
width: 500 width: 500
}); }),
var datepickerDialog = $( "#dialog-datepicker" ).dialog({ datepickerDialog = $( "#dialog-datepicker" ).dialog({
autoOpen: false, autoOpen: false,
modal: true modal: true
}), }),
@ -39,6 +39,10 @@
width: 600 width: 600
}); });
$( "#open-dialog" ).click(function() {
dialog.dialog( "open" );
});
$( "#open-datepicker" ).click(function() { $( "#open-datepicker" ).click(function() {
datepickerDialog.dialog( "open" ); datepickerDialog.dialog( "open" );
}); });
@ -70,6 +74,8 @@
<a href="#">Outside link</a> <a href="#">Outside link</a>
<button id="open-dialog">Reopen dialog</button>
<div id="dialog" title="Basic dialog"> <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>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> <p><button id="open-datepicker">Open another window with a datepicker.</button></p>

View File

@ -248,6 +248,13 @@ $.widget("ui.dialog", {
this.overlay.destroy(); 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 ) { if ( this.options.hide ) {
this._hide( this.uiDialog, this.options.hide, function() { this._hide( this.uiDialog, this.options.hide, function() {
that._trigger( "close", event ); that._trigger( "close", event );
@ -278,6 +285,8 @@ $.widget("ui.dialog", {
options = this.options, options = this.options,
uiDialog = this.uiDialog; uiDialog = this.uiDialog;
this.opener = $( this.document[ 0 ].activeElement );
this._size(); this._size();
this._position( options.position ); this._position( options.position );
uiDialog.show( options.show ); uiDialog.show( options.show );