Permalink
Browse files

Selectmenu: Focus button during outgoing page transition

Fixes gh-6578
Closes gh-7941
  • Loading branch information...
gabrielschulhof committed Jan 26, 2015
1 parent 7483a6b commit 07696beef46eeaf7dc52871982f51a526eafcd07
@@ -109,6 +109,25 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
}
},
// Focus the button before the page containing the widget replaces the dialog page
_handleBeforeTransition: function( event, data ) {
var focusButton;
if ( data && data.prevPage && data.prevPage[ 0 ] === this.menuPage[ 0 ] ) {
focusButton = $.proxy( function() {
this._delay( function() {
this._focusButton();
});
}, this );
if ( data.options && data.options.transition && data.options.transition !== "none" ) {
data.prevPage.animationComplete( focusButton );
} else {
focusButton();
}
}
},
_handleMenuPageHide: function() {
// After the dialog's done, we may want to trigger change if the value has actually changed
@@ -287,6 +306,8 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
this._on( this.headerClose, { click: "_handleHeaderCloseClick" } );
}
this._on( this.document, { pagecontainerbeforetransition: "_handleBeforeTransition" } );
return this;
},
@@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Select Button Focus Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>
<script>
$.testHelper.asyncLoad([
[
"widgets/forms/select",
"widgets/forms/select.custom"
],
[ "init" ],
[ "button_focus_core.js" ]
]);
</script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="default" data-nstest-role="page">
<select name="button-focus-test" id="button-focus-test" data-nstest-native-menu="false">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</body>
</html>
@@ -0,0 +1,60 @@
function defineTest( testName, clickAction, expectChange ) {
asyncTest( testName, function() {
var eventNs = "." + $.camelCase( testName.replace( / /g, "-" ) );
expect( expectChange ? 6 : 5 );
$.testHelper.detailedEventCascade([
function() {
$( "#button-focus-test-button" ).click();
},
{
pagecontainerchange: {
src: $( document ),
event: "pagecontainerchange" + eventNs + "1"
}
},
function( result ) {
var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );
deepEqual( result.pagecontainerchange.timedOut, false, "Page change has occurred" );
deepEqual( activePage.attr( "id" ), "button-focus-test-dialog", "Dialog is active" );
clickAction( activePage );
},
$.extend({
pagecontainerchange: {
src: $( document ),
event: "pagecontainerchange" + eventNs + "2"
},
focus: {
src: $( "#button-focus-test-button" ),
event: "focus" + eventNs + "2"
}
}, ( expectChange ? {
change: {
src: $( "#button-focus-test" ),
event: "change" + eventNs + "2"
}
} : {} ) ),
function( result ) {
var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );
deepEqual( result.pagecontainerchange.timedOut, false, "Page change has occurred" );
deepEqual( activePage.attr( "id" ), "default", "Default page is active" );
deepEqual( result.focus.timedOut, false, "Button has received focus" );
if ( expectChange ) {
deepEqual( result.change.timedOut, false, "Element has emitted 'change'" );
}
start();
}
]);
});
}
defineTest( "Selectmenu regains focus when dialog closes without changes", function( dialogPage ) {
dialogPage.find( "a" ).first().click();
});
defineTest( "Selectmenu regains focus when dialog closes due to change", function( dialogPage ) {
dialogPage.find( "#button-focus-test-menu li" ).eq( 11 ).click();
}, true );

0 comments on commit 07696be

Please sign in to comment.