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...
1 parent cbd1c32 commit 545b66e44acee0cf996823f37e9b40b401c960d0 @ldeluca ldeluca committed with gabrielschulhof Oct 7, 2014
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.