Permalink
Browse files

Popup: Blue focus flash on android 4.2

(cherry picked from commit 59fac36)

Closes gh-7757
Fixes gh-7533
  • Loading branch information...
ldeluca authored and gabrielschulhof committed Oct 7, 2014
1 parent cbd1c32 commit 545b66e44acee0cf996823f37e9b40b401c960d0
Showing with 61 additions and 19 deletions.
  1. +21 −10 js/widgets/popup.js
  2. +1 −0 tests/integration/popup/index.html
  3. +39 −9 tests/integration/popup/popup_core.js
View
@@ -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;
@@ -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>
@@ -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 ) {

0 comments on commit 545b66e

Please sign in to comment.