Panel: Allow click that opens panel to bubble

(cherry picked from commit 5e234e8) Closes gh-7302 Fixes gh-7301
jquery-archive · Apr 11, 2014 · ab9ab7e · ab9ab7e
1 parent fa2ccd1
commit ab9ab7e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 9 deletions.
diff --git a/js/widgets/panel.js b/js/widgets/panel.js
@@ -144,14 +144,6 @@ $.widget( "mobile.panel", {
 		this.element.addClass( this._getPanelClasses() );
 	},
 
-	_handleCloseClickAndEatEvent: function( event ) {
-		if ( !event.isDefaultPrevented() ) {
-			event.preventDefault();
-			this.close();
-			return false;
-		}
-	},
-
 	_handleCloseClick: function( event ) {
 		if ( !event.isDefaultPrevented() ) {
 			this.close();
@@ -238,7 +230,6 @@ $.widget( "mobile.panel", {
 				});
 			}
 			this.toggle();
-			return false;
 		}
 	},
 

diff --git a/tests/integration/panel/open-click-bubbling-tests.html b/tests/integration/panel/open-click-bubbling-tests.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Panel 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="../../../tests/jquery.testHelper.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="../../../external/qunit/qunit.js"></script>
+	<script>
+		$.testHelper.asyncLoad([
+			[
+				"widgets/panel",
+				"widgets/page"
+			],
+			[ "init" ],
+			[
+				"open_click_bubbling_core.js"
+			]
+		]);
+	</script>
+
+	<script src="../../swarminject.js"></script>
+</head>
+<body class="ui-body-b">
+	<div id="qunit"></div>
+
+	<div data-nstest-role="page">
+		<div data-nstest-role="panel" id="open-click-bubbling-panel">
+			<p>The panel</p>
+		</div>
+		<a href="#open-click-bubbling-panel" id="open-click-bubbling-link">Open panel</a>
+	</div>
+
+</body>
diff --git a/tests/integration/panel/open_click_bubbling_core.js b/tests/integration/panel/open_click_bubbling_core.js
@@ -0,0 +1,31 @@
+asyncTest( "Click on link that opens panel may bubble and does not cause navigation", function() {
+	var origHref = location.href,
+		eventNs = ".clickOnLinkThatOpensPanelMayBubble",
+		panel = $( "#open-click-bubbling-panel" ),
+		link = $( "#open-click-bubbling-link" );
+
+	$.testHelper.detailedEventCascade([
+		function() {
+			link.click();
+		},
+		{
+			panelopen: { src: panel, event: "panelopen" + eventNs + "1" },
+			click: { src: $( document ), event: "click" + eventNs + "1" }
+		},
+		function( result ) {
+			deepEqual( result.panelopen.timedOut, false, "panelopen event occurred" );
+			deepEqual( result.click.timedOut, false, "click propagated to document" );
+		},
+		{
+			timeout: { length: 500 }
+		},
+		function() {
+			deepEqual( location.href, origHref, "opening the panel leaves location.href alone" );
+			panel.panel( "close" );
+		},
+		{
+			panelclose: { src: panel, event: "panelclose" + eventNs + "2" }
+		},
+		start
+	]);
+});