Dialog: If a show animation is provided, the post-show code dependent on the dialog being ready occur in a callback function passed to the show method. Fixed #4421, 4675 - Focus lost from dialog which uses show effect.

Author: ajcrews

ui/jquery.ui.dialog.js

@@ -282,50 +282,61 @@ $.widget("ui.dialog", {
 		}
 		self._size();
 		self._position(options.position);
-		uiDialog.show(options.show);
-		self.moveToTop(true);
-
-		// prevent tabbing out of modal dialogs
-		if (options.modal) {
-			uiDialog.bind('keypress.ui-dialog', function(event) {
-				if (event.keyCode !== $.ui.keyCode.TAB) {
-					return;
-				}
+
+		// Handle show animation
+		var fShowCallback = function(event) {
+			self.moveToTop(true);
 
-				var tabbables = $(':tabbable', this),
-					first = tabbables.filter(':first'),
-					last  = tabbables.filter(':last');
+			// prevent tabbing out of modal dialogs
+			if (options.modal) {
+				uiDialog.bind('keypress.ui-dialog', function(event) {
+					if (event.keyCode !== $.ui.keyCode.TAB) {
+						return;
+					}
+		
+					var tabbables = $(':tabbable', this),
+						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;
+					}
+				});
+			}
 
-				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
-		// if there are no tabbable elements, set focus on the dialog itself
-		if (!options.focusSelector) {
-			var arrTab = [],
-				$tab;
+			// 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 (!options.focusSelector) {
+				var arrTab = [],
+					$tab;
+					
+				arrTab.push(uiDialog.find('.ui-dialog-content :tabbable:not(' + options.focusFilter + '):first').filter(':not(.close)'));
+				arrTab.push(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'));
+				arrTab.push(uiDialog);
 
-			arrTab.push(uiDialog.find('.ui-dialog-content :tabbable:not(' + options.focusFilter + '):first').filter(':not(.close)'));
-			arrTab.push(uiDialog.find('.ui-dialog-buttonpane :tabbable:first'));
-			arrTab.push(uiDialog);
-			
-			// Focus first populated selection
-			for (var i = 0; i < arrTab.length; i++) {
-				$tab = arrTab[i];
-				if ($tab.length) {
-					$tab.focus();
-					break;
+				// Focus first populated selection
+				for (var i = 0; i < arrTab.length; i++) {
+					$tab = arrTab[i];
+					if ($tab.length) {
+						$tab.focus();
+						break;
+					}
 				}
+			} else {
+				uiDialog.find(options.focusSelector).focus();
 			}
+		};
+		
+		if (options.show) {
+			uiDialog.show(options.show, fShowCallback);
 		} else {
-			uiDialog.find(options.focusSelector).focus();
+			uiDialog.show();
+			
+			fShowCallback();
 		}
 
 		self._trigger('open');