Selectmenu: Focus button during outgoing page transition

Fixes gh-6578 Closes gh-7941
jquery-archive · Apr 2, 2015 · 07696be · 07696be
1 parent 7483a6b
commit 07696be
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 0 deletions.
diff --git a/js/widgets/forms/select.custom.js b/js/widgets/forms/select.custom.js
@@ -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;
 	},
 

diff --git a/tests/integration/select/button-focus-tests.html b/tests/integration/select/button-focus-tests.html
@@ -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>
diff --git a/tests/integration/select/button_focus_core.js b/tests/integration/select/button_focus_core.js
@@ -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 );