Dialog: Restore focus to the previously focused element when window regains focus. Fixes #9101 - Dialog: Track last focused element instead of always focusing the first tabbable element

1 files changed, 34 insertions, 14 deletions

diff --git a/tests/unit/dialog/dialog_core.js b/tests/unit/dialog/dialog_core.js
index e85759dc9..062d44576 100644
--- a/tests/unit/dialog/dialog_core.js
+++ b/tests/unit/dialog/dialog_core.js
@@ -40,7 +40,7 @@ test("widget method", function() {
 });
 
 asyncTest( "focus tabbable", function() {
-	expect( 5 );
+	expect( 6 );
 	var element,
 		options = {
 			buttons: [{
@@ -50,6 +50,12 @@ asyncTest( "focus tabbable", function() {
 		};
 
 	function checkFocus( markup, options, testFn, next ) {
+
+		// Support: IE8
+		// For some reason the focus doesn't get set properly if we don't
+		// focus the body first.
+		$( "body" ).focus();
+
 		element = $( markup ).dialog( options );
 		setTimeout(function() {
 			testFn();
@@ -59,43 +65,57 @@ asyncTest( "focus tabbable", function() {
 	}
 
 	function step1() {
+		element = $( "<div><input><input></div>" ).dialog( options );
+		setTimeout(function() {
+			var input = element.find( "input:last" ).focus().blur();
+			element.dialog( "instance" )._focusTabbable();
+			setTimeout(function() {
+				equal( document.activeElement, input[ 0 ],
+					"1. an element that was focused previously." );
+				element.remove();
+				setTimeout( step2 );
+			});
+		});
+	}
+
+	function step2() {
 		checkFocus( "<div><input><input autofocus></div>", options, function() {
 			equal( document.activeElement, element.find( "input" )[ 1 ],
-				"1. first element inside the dialog matching [autofocus]" );
-		}, step2 );
+				"2. first element inside the dialog matching [autofocus]" );
+		}, step3 );
 	}
 
-	function step2() {
+	function step3() {
 		checkFocus( "<div><input><input></div>", options, function() {
 			equal( document.activeElement, element.find( "input" )[ 0 ],
-				"2. tabbable element inside the content element" );
-		}, step3 );
+				"3. tabbable element inside the content element" );
+		}, step4 );
 	}
 
-	function step3() {
+	function step4() {
 		checkFocus( "<div>text</div>", options, function() {
 			equal( document.activeElement,
 				element.dialog( "widget" ).find( ".ui-dialog-buttonpane button" )[ 0 ],
-				"3. tabbable element inside the buttonpane" );
-		}, step4 );
+				"4. tabbable element inside the buttonpane" );
+		}, step5 );
 	}
 
-	function step4() {
+	function step5() {
 		checkFocus( "<div>text</div>", {}, function() {
 			equal( document.activeElement,
 				element.dialog( "widget" ).find( ".ui-dialog-titlebar .ui-dialog-titlebar-close" )[ 0 ],
-				"4. the close button" );
-		}, step5 );
+				"5. the close button" );
+		}, step6 );
 	}
 
-	function step5() {
+	function step6() {
 		element = $( "<div>text</div>" ).dialog({
 			autoOpen: false
 		});
 		element.dialog( "widget" ).find( ".ui-dialog-titlebar-close" ).hide();
 		element.dialog( "open" );
 		setTimeout(function() {
-			equal( document.activeElement, element.parent()[ 0 ], "5. the dialog itself" );
+			equal( document.activeElement, element.parent()[ 0 ], "6. the dialog itself" );
 			element.remove();
 			start();
 		});