Skip to content
This repository
Browse code

focus parent link on close when opened by a parent link

  • Loading branch information...
commit 72413a0833c499a8ce392638c7a4e81ffc827ef6 1 parent e3c4c82
John Bender authored
26  js/widgets/popup.js
@@ -480,6 +480,8 @@ define( [ "jquery",
480 480
 			// Copy out the transition, because we may be overwriting it later and we don't want to pass that change back to the caller
481 481
 			transition = options.transition;
482 482
 
  483
+			this._link = options.link;
  484
+
483 485
 			// Give applications a chance to modify the contents of the container before it appears
484 486
 			this._trigger( "beforeposition" );
485 487
 
@@ -536,6 +538,16 @@ define( [ "jquery",
536 538
 
537 539
 		_closePrereqsDone: function() {
538 540
 			this._ui.container.removeAttr( "tabindex" );
  541
+
  542
+			// remove the global mutex for popups
  543
+			$.mobile.popup.active = undefined;
  544
+
  545
+			// if the popup was opened by a link focus is on close
  546
+			if( this._link ){
  547
+				this._link.focus();
  548
+			}
  549
+
  550
+			// alert users that the popup is closed
539 551
 			this._trigger( "afterclose" );
540 552
 		},
541 553
 
@@ -560,9 +572,6 @@ define( [ "jquery",
560 572
 				applyTransition: true,
561 573
 				prereqs: this._prereqs
562 574
 			});
563  
-
564  
-			// remove the global mutex for popups
565  
-			$.mobile.popup.active = undefined;
566 575
 		},
567 576
 
568 577
 		_destroy: function() {
@@ -633,6 +642,8 @@ define( [ "jquery",
633 642
 		}
634 643
 	});
635 644
 
  645
+
  646
+	// TODO this can be moved inside the widget create along with the page before change binding
636 647
 	$.mobile.popup.handleLink = function( $link ) {
637 648
 		var closestPage = $link.closest( ":jqmData(role='page')" ),
638 649
 			scope = ( ( closestPage.length === 0 ) ? $( "body" ) : closestPage ),
@@ -648,14 +659,6 @@ define( [ "jquery",
648 659
 				positionTo: $link.jqmData( "position-to" ),
649 660
 				link: $link
650 661
 			});
651  
-
652  
-			// If this link is not inside a popup, re-focus onto it after the popup(s) complete
653  
-			// For some reason, a $.proxy( $link, "focus" ) doesn't work as the handler
654  
-			if ( $link.parents( ".ui-popup-container" ).length === 0 ) {
655  
-				$( $.mobile.popup.popupManager ).one( "done", function() {
656  
-					$link.focus();
657  
-				});
658  
-			}
659 662
 		}
660 663
 
661 664
 		//remove after delay
@@ -664,6 +667,7 @@ define( [ "jquery",
664 667
 		}, 300 );
665 668
 	};
666 669
 
  670
+	// TODO move inside _create
667 671
 	$( document ).bind( "pagebeforechange", function( e, data ) {
668 672
 		if ( data.options.role === "popup" ) {
669 673
 			$.mobile.popup.handleLink( data.options.link );
21  tests/unit/popup/popup_core.js
@@ -416,4 +416,25 @@
416 416
 		]);
417 417
 	});
418 418
 
  419
+	asyncTest( "Popup link focused on close", function() {
  420
+		var $link = $( "#open-test-popup" ), $popup = $( "#test-popup" );
  421
+
  422
+		expect( 2 );
  423
+
  424
+		// make sure the link is blurred
  425
+		$link.blur();
  426
+		ok( !$link.is( ":focus" ), "link is not focused to start" );
  427
+
  428
+		// check that after the popup is closed the focus is correct
  429
+		$popup.one( "popupafterclose", function() {
  430
+			ok( $link.is( ":focus" ), "link is focused after the popup closes" );
  431
+			start();
  432
+		});
  433
+
  434
+		// open the popup
  435
+		$link.click();
  436
+
  437
+		// close the popup
  438
+		$popup.popup( "close" );
  439
+	});
419 440
 })( jQuery );

0 notes on commit 72413a0

Markus Staab

wouldn't IE (6/7?) crash when using native focus() on an invisible element? I assume some actions in the popup would lead to a disappearing/removed link.

Please sign in to comment.
Something went wrong with that request. Please try again.