library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Dialog: Only bind focus-trapping event once. Fixes #8551 - After repeated opening and closing of a modal dialog, focus navigation using tab becomes slow.

Browse Source
This commit is contained in:
Scott González 2012-09-04 17:00:26 -04:00
parent e242868f56
commit 6abb10766c
1 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/jquery.ui.dialog.js vendored
View File

@ -170,6 +170,25 @@ $.widget("ui.dialog", {
if ( $.fn.bgiframe ) { if ( $.fn.bgiframe ) {
uiDialog.bgiframe(); uiDialog.bgiframe();
} }
// prevent tabbing out of modal dialogs
this._on( uiDialog, { keydown: function( event ) {
if ( !options.modal || event.keyCode !== $.ui.keyCode.TAB ) {
return;
}
var tabbables = $( ":tabbable", uiDialog ),
first = tabbables.filter( ":first" ),
last = tabbables.filter( ":last" );
if ( event.target === last[0] && !event.shiftKey ) {
first.focus( 1 );
return false;
} else if ( event.target === first[0] && event.shiftKey ) {
last.focus( 1 );
return false;
}
}});
}, },
_init: function() { _init: function() {
@ -225,7 +244,6 @@ $.widget("ui.dialog", {
if ( this.overlay ) { if ( this.overlay ) {
this.overlay.destroy(); this.overlay.destroy();
} }
this._off( this.uiDialog, "keypress" );
if ( this.options.hide ) { if ( this.options.hide ) {
this.uiDialog.hide( this.options.hide, function() { this.uiDialog.hide( this.options.hide, function() {
@ -309,27 +327,6 @@ $.widget("ui.dialog", {
this.overlay = options.modal ? new $.ui.dialog.overlay( this ) : null; this.overlay = options.modal ? new $.ui.dialog.overlay( this ) : null;
this.moveToTop( true ); this.moveToTop( true );
// prevent tabbing out of modal dialogs
if ( options.modal ) {
this._on( uiDialog, { keydown: function( event ) {
if ( event.keyCode !== $.ui.keyCode.TAB ) {
return;
}
var tabbables = $( ":tabbable", uiDialog ),
first = tabbables.filter( ":first" ),
last = tabbables.filter( ":last" );
if ( event.target === last[0] && !event.shiftKey ) {
first.focus( 1 );
return false;
} else if ( event.target === first[0] && event.shiftKey ) {
last.focus( 1 );
return false;
}
}});
}
// set focus to the first tabbable element in the content area or the first button // set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself // if there are no tabbable elements, set focus on the dialog itself
hasFocus = this.element.find( ":tabbable" ); hasFocus = this.element.find( ":tabbable" );