Popup: Blue focus flash on android 4.2

(cherry picked from commit 59fac36)

Closes gh-7757
Fixes gh-7533

js/widgets/popup.js

@@ -298,12 +298,10 @@ $.widget( "mobile.popup", {
 
 		if ( targetElement !== ui.container[ 0 ] ) {
 			target = $( targetElement );
-			if ( 0 === target.parents().filter( ui.container[ 0 ] ).length ) {
-				$( this.document[ 0 ].activeElement ).one( "focus", function(/* theEvent */) {
-					if ( targetElement.nodeName.toLowerCase() !== "body" ) {
-				            target.blur();
-				        }
-				});
+			if ( !$.contains( ui.container[ 0 ], targetElement ) ) {
+				$( this.document[ 0 ].activeElement ).one( "focus", $.proxy( function() {
+					this._safelyBlur( targetElement );
+				}, this ) );
 				ui.focusElement.focus();
 				theEvent.preventDefault();
 				theEvent.stopImmediatePropagation();
@@ -634,13 +632,28 @@ $.widget( "mobile.popup", {
 		}
 	},
 
+	_safelyBlur: function( currentElement ){
+		if ( currentElement !== this.window[ 0 ] &&
+			currentElement.nodeName.toLowerCase() !== "body" ) {
+				$( currentElement ).blur();
+		}
+	},
+
 	_openPrerequisitesComplete: function() {
-		var id = this.element.attr( "id" );
+		var id = this.element.attr( "id" ),
+			firstFocus = this._ui.container.find( ":focusable" ).first();
 
 		this._ui.container.addClass( "ui-popup-active" );
 		this._isOpen = true;
 		this._resizeScreen();
-		this._ui.container.attr( "tabindex", "0" ).focus();
+
+		// Check to see if currElement is not a child of the container.  If it's not, blur
+		if ( !$.contains( this._ui.container[ 0 ], this.document[ 0 ].activeElement ) ) {
+			this._safelyBlur( this.document[ 0 ].activeElement );
+		}
+		if ( firstFocus.length > 0 ) {
+			this._ui.focusElement = firstFocus;
+		}
 		this._ignoreResizeEvents();
 		if ( id ) {
 			this.document.find( "[aria-haspopup='true'][aria-owns='" +  id + "']" ).attr( "aria-expanded", true );
@@ -725,8 +738,6 @@ $.widget( "mobile.popup", {
 		var container = this._ui.container,
 			id = this.element.attr( "id" );
 
-		container.removeAttr( "tabindex" );
-
 		// remove the global mutex for popups
 		$.mobile.popup.active = undefined;
 

tests/integration/popup/index.html

@@ -54,6 +54,7 @@
 				<p>This is another test popup</p>
 			</div>
 			<a id="open-xyzzy-popup" href="#xyzzy" data-nstest-rel="popup" data-nstest-role="button">Pop</a>
+			<input type="text" id="test-input" value="test" />
 			<a id="open-test-popup" href="#test-popup" data-nstest-rel="popup" data-nstest-role="button">Pop</a>
 			<ul data-nstest-role="listview">
 				<li id="open-test-popup-li"><a id="open-test-popup-li-link" href="#test-popup" data-nstest-rel="popup">Pop</a></li>

tests/integration/popup/popup_core.js

@@ -337,29 +337,59 @@
 		]);
 	});
 
-	asyncTest( "Popup focused after open", function() {
-		var $link = $( "#open-test-popup" ), $popup = $( "#test-popup" );
+	// The test below adds an input, gives it focus, then opens the popup,
+	// and makes sure the input has been blurred.
+	asyncTest( "Popup assures previous element is blurred", function() {
+		var link = $( "#open-test-popup" ),
+			popup = $( "#test-popup" ),
+			textinput = $( "#test-input" );
 
-		expect( 3 );
+		expect( 7 );
 
 		$.testHelper.detailedEventCascade([
 			function() {
-				$popup.popup( "open" );
+
+				// First focus on the text input
+				textinput.focus();
+			},
+
+			{
+				focus: { src: textinput, event: "focus.popupFocusedAfterOpen0" }
+			},
+
+			function( result ){
+				deepEqual( document.activeElement, textinput[ 0 ],
+					"Textinput focused before popup is opened" );
+				deepEqual( result.focus.timedOut, false );
+				popup.popup( "open" );
 			},
 
 			{
-				focus: { src: $popup.parent(), event: "focus.popupFocusedAfterOpen1" },
-				opened: { src: $popup, event: "popupafteropen.popupFocusedAfterOpen1" }
+				blur: { src: textinput, event: "blur.popupFocusedAfterOpen1" },
+				opened: { src: popup, event: "popupafteropen.popupFocusedAfterOpen1" }
 			},
 
 			function( result ) {
 				ok( !result.opened.timedOut, "popup emitted 'popupafteropen'" );
-				ok( !result.focus.timedOut, "focus fired after the popup opens" );
-				$popup.popup( "close" );
+				deepEqual( result.blur.timedOut, false, "The blur event is fired after the popup opens" );
+
+				// Try to focus on the textinput again
+				textinput.focus();
+			},
+
+			{
+				focus: { src: textinput, event: "focus.popupFocusedAfterOpen2" }
+			},
+
+			function( result ) {
+				deepEqual( result.focus.timedOut, false, "Focus event received" );
+				deepEqual( document.activeElement === textinput[ 0 ], false,
+					"An input outside the popup does not receive focus while the popup is open" );
+				popup.popup( "close" );
 			},
 
 			{
-				closed: { src: $popup, event: "popupafterclose.popupFocusedAfterOpen2" }
+				closed: { src: popup, event: "popupafterclose.popupFocusedAfterOpen2" }
 			},
 
 			function( result ) {