Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 07696be

Browse files
author
Gabriel Schulhof
committed
Selectmenu: Focus button during outgoing page transition
Fixes gh-6578 Closes gh-7941
1 parent 7483a6b commit 07696be

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed

‎js/widgets/forms/select.custom.js

+21
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,25 @@ $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
109109
}
110110
},
111111

112+
// Focus the button before the page containing the widget replaces the dialog page
113+
_handleBeforeTransition: function( event, data ) {
114+
var focusButton;
115+
116+
if ( data && data.prevPage && data.prevPage[ 0 ] === this.menuPage[ 0 ] ) {
117+
focusButton = $.proxy( function() {
118+
this._delay( function() {
119+
this._focusButton();
120+
});
121+
}, this );
122+
123+
if ( data.options && data.options.transition && data.options.transition !== "none" ) {
124+
data.prevPage.animationComplete( focusButton );
125+
} else {
126+
focusButton();
127+
}
128+
}
129+
},
130+
112131
_handleMenuPageHide: function() {
113132

114133
// 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, {
287306
this._on( this.headerClose, { click: "_handleHeaderCloseClick" } );
288307
}
289308

309+
this._on( this.document, { pagecontainerbeforetransition: "_handleBeforeTransition" } );
310+
290311
return this;
291312
},
292313

‎tests/integration/select/button-focus-tests.html

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Select Button Focus Test Suite</title>
7+
8+
<script src="../../../external/requirejs/require.js"></script>
9+
<script src="../../../js/requirejs.config.js"></script>
10+
<script src="../../../js/jquery.tag.inserter.js"></script>
11+
<script src="../../jquery.setNameSpace.js"></script>
12+
<script src="../../../external/qunit/qunit.js"></script>
13+
<script src="../../../tests/jquery.testHelper.js"></script>
14+
<script>
15+
$.testHelper.asyncLoad([
16+
[
17+
"widgets/forms/select",
18+
"widgets/forms/select.custom"
19+
],
20+
[ "init" ],
21+
[ "button_focus_core.js" ]
22+
]);
23+
</script>
24+
25+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
26+
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
27+
<link rel="stylesheet" href="../../jqm-tests.css"/>
28+
29+
<script src="../../swarminject.js"></script>
30+
</head>
31+
<body>
32+
33+
<div id="qunit"></div>
34+
35+
<div id="default" data-nstest-role="page">
36+
<select name="button-focus-test" id="button-focus-test" data-nstest-native-menu="false">
37+
<option value="AL">Alabama</option>
38+
<option value="AK">Alaska</option>
39+
<option value="AZ">Arizona</option>
40+
<option value="AR">Arkansas</option>
41+
<option value="CA">California</option>
42+
<option value="CO">Colorado</option>
43+
<option value="CT">Connecticut</option>
44+
<option value="DE">Delaware</option>
45+
<option value="FL">Florida</option>
46+
<option value="GA">Georgia</option>
47+
<option value="HI">Hawaii</option>
48+
<option value="ID">Idaho</option>
49+
<option value="IL">Illinois</option>
50+
<option value="IN">Indiana</option>
51+
<option value="IA">Iowa</option>
52+
<option value="KS">Kansas</option>
53+
<option value="KY">Kentucky</option>
54+
<option value="LA">Louisiana</option>
55+
<option value="ME">Maine</option>
56+
<option value="MD">Maryland</option>
57+
<option value="MA">Massachusetts</option>
58+
<option value="MI">Michigan</option>
59+
<option value="MN">Minnesota</option>
60+
<option value="MS">Mississippi</option>
61+
<option value="MO">Missouri</option>
62+
<option value="MT">Montana</option>
63+
<option value="NE">Nebraska</option>
64+
<option value="NV">Nevada</option>
65+
<option value="NH">New Hampshire</option>
66+
<option value="NJ">New Jersey</option>
67+
<option value="NM">New Mexico</option>
68+
<option value="NY">New York</option>
69+
<option value="NC">North Carolina</option>
70+
<option value="ND">North Dakota</option>
71+
<option value="OH">Ohio</option>
72+
<option value="OK">Oklahoma</option>
73+
<option value="OR">Oregon</option>
74+
<option value="PA">Pennsylvania</option>
75+
<option value="RI">Rhode Island</option>
76+
<option value="SC">South Carolina</option>
77+
<option value="SD">South Dakota</option>
78+
<option value="TN">Tennessee</option>
79+
<option value="TX">Texas</option>
80+
<option value="UT">Utah</option>
81+
<option value="VT">Vermont</option>
82+
<option value="VA">Virginia</option>
83+
<option value="WA">Washington</option>
84+
<option value="WV">West Virginia</option>
85+
<option value="WI">Wisconsin</option>
86+
<option value="WY">Wyoming</option>
87+
</select>
88+
</div>
89+
90+
</body>
91+
</html>

‎tests/integration/select/button_focus_core.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
function defineTest( testName, clickAction, expectChange ) {
2+
asyncTest( testName, function() {
3+
var eventNs = "." + $.camelCase( testName.replace( / /g, "-" ) );
4+
5+
expect( expectChange ? 6 : 5 );
6+
7+
$.testHelper.detailedEventCascade([
8+
function() {
9+
$( "#button-focus-test-button" ).click();
10+
},
11+
{
12+
pagecontainerchange: {
13+
src: $( document ),
14+
event: "pagecontainerchange" + eventNs + "1"
15+
}
16+
},
17+
function( result ) {
18+
var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );
19+
20+
deepEqual( result.pagecontainerchange.timedOut, false, "Page change has occurred" );
21+
deepEqual( activePage.attr( "id" ), "button-focus-test-dialog", "Dialog is active" );
22+
clickAction( activePage );
23+
},
24+
$.extend({
25+
pagecontainerchange: {
26+
src: $( document ),
27+
event: "pagecontainerchange" + eventNs + "2"
28+
},
29+
focus: {
30+
src: $( "#button-focus-test-button" ),
31+
event: "focus" + eventNs + "2"
32+
}
33+
}, ( expectChange ? {
34+
change: {
35+
src: $( "#button-focus-test" ),
36+
event: "change" + eventNs + "2"
37+
}
38+
} : {} ) ),
39+
function( result ) {
40+
var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );
41+
42+
deepEqual( result.pagecontainerchange.timedOut, false, "Page change has occurred" );
43+
deepEqual( activePage.attr( "id" ), "default", "Default page is active" );
44+
deepEqual( result.focus.timedOut, false, "Button has received focus" );
45+
if ( expectChange ) {
46+
deepEqual( result.change.timedOut, false, "Element has emitted 'change'" );
47+
}
48+
start();
49+
}
50+
]);
51+
});
52+
}
53+
54+
defineTest( "Selectmenu regains focus when dialog closes without changes", function( dialogPage ) {
55+
dialogPage.find( "a" ).first().click();
56+
});
57+
58+
defineTest( "Selectmenu regains focus when dialog closes due to change", function( dialogPage ) {
59+
dialogPage.find( "#button-focus-test-menu li" ).eq( 11 ).click();
60+
}, true );

0 commit comments

Comments
 (0)