Dialog: Only create the button pane once and store a reference to it. Fixes #8343 - _createButtons removes all elements with .ui-dialog-buttonpane class.

1 files changed, 13 insertions, 11 deletions

diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js
index f60a1f78d..e48c26400 100644
--- a/ui/jquery.ui.dialog.js
+++ b/ui/jquery.ui.dialog.js
@@ -143,7 +143,14 @@ $.widget("ui.dialog", {
 				.addClass( "ui-dialog-title" )
 				.attr( "id", titleId )
 				.html( title )
-				.prependTo( uiDialogTitlebar );
+				.prependTo( uiDialogTitlebar ),
+
+			uiDialogButtonPane = ( this.uiDialogButtonPane = $( "<div>" ) )
+				.addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ),
+
+			uiButtonSet = ( this.uiButtonSet = $( "<div>" ) )
+				.addClass( "ui-dialog-buttonset" )
+				.appendTo( uiDialogButtonPane );
 
 		uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection();
 		this._hoverable( uiDialogTitlebarClose );
@@ -326,7 +333,7 @@ $.widget("ui.dialog", {
 		// if there are no tabbable elements, set focus on the dialog itself
 		hasFocus = this.element.find( ":tabbable" );
 		if ( !hasFocus.length ) {
-			hasFocus = uiDialog.find( ".ui-dialog-buttonpane :tabbable" );
+			hasFocus = this.uiDialogButtonPane.find( ":tabbable" );
 			if ( !hasFocus.length ) {
 				hasFocus = uiDialog;
 			}
@@ -345,7 +352,8 @@ $.widget("ui.dialog", {
 			hasButtons = false;
 
 		// if we already have a button pane, remove it
-		this.uiDialog.find( ".ui-dialog-buttonpane" ).remove();
+		this.uiDialogButtonPane.remove();
+		this.uiButtonSet.empty();
 
 		if ( typeof buttons === "object" && buttons !== null ) {
 			$.each( buttons, function() {
@@ -353,12 +361,6 @@ $.widget("ui.dialog", {
 			});
 		}
 		if ( hasButtons ) {
-			uiDialogButtonPane = $( "<div>" )
-				.addClass( "ui-dialog-buttonpane  ui-widget-content ui-helper-clearfix" );
-			uiButtonSet = $( "<div>" )
-				.addClass( "ui-dialog-buttonset" )
-				.appendTo( uiDialogButtonPane );
-
 			$.each( buttons, function( name, props ) {
 				props = $.isFunction( props ) ?
 					{ click: props, text: name } :
@@ -369,13 +371,13 @@ $.widget("ui.dialog", {
 					.click(function() {
 						props.click.apply( that.element[0], arguments );
 					})
-					.appendTo( uiButtonSet );
+					.appendTo( that.uiButtonSet );
 				if ( $.fn.button ) {
 					button.button();
 				}
 			});
 			this.uiDialog.addClass( "ui-dialog-buttons" );
-			uiDialogButtonPane.appendTo( this.uiDialog );
+			this.uiDialogButtonPane.appendTo( this.uiDialog );
 		} else {
 			this.uiDialog.removeClass( "ui-dialog-buttons" );
 		}