Panel: Do not close in response to a default-prevented swipe event

Fixes gh-6925
Closes gh-6947

js/widgets/panel.js

@@ -233,21 +233,19 @@ $.widget( "mobile.panel", {
 		}
 	},
 
+	_handleSwipe: function( event ) {
+		if ( !event.isDefaultPrevented() ) {
+			this.close();
+		}
+	},
+
 	_bindSwipeEvents: function() {
-		var self = this,
-			area = self._modal ? self.element.add( self._modal ) : self.element;
+		var handler = {};
 
-		// on swipe, close the panel
-		if ( !!self.options.swipeClose ) {
-			if ( self.options.position === "left" ) {
-				area.on( "swipeleft.panel", function(/* e */) {
-					self.close();
-				});
-			} else {
-				area.on( "swiperight.panel", function(/* e */) {
-					self.close();
-				});
-			}
+		// Close the panel on swipe if the swipe event's default is not prevented
+		if ( this.options.swipeClose ) {
+			handler[ "swipe" + this.options.position ] = "_handleSwipe";
+			this._on( ( this._modal ? this.element.add( this._modal ) : this.element ), handler );
 		}
 	},
 
@@ -487,7 +485,6 @@ $.widget( "mobile.panel", {
 
 		this.element
 			.removeClass( [ this._getPanelClasses(), o.classes.panelOpen, o.classes.animate ].join( " " ) )
-			.off( "swipeleft.panel swiperight.panel" )
 			.off( "panelbeforeopen" )
 			.off( "panelhide" )
 			.off( "keyup.panel" )

tests/unit/panel/index.html

@@ -55,6 +55,7 @@
 			<p>Contents of a panel.</p>
 		</div>
 		<div data-nstest-role="panel" id="panel-test-dismiss">
+			<input id="dismiss-input"></input>
 			<p>Contents of a panel.</p>
 		</div>
 		<div data-nstest-role="panel" id="panel-test-destroy">

tests/unit/panel/panel_core.js

@@ -264,7 +264,48 @@
 
 	});
 
-	asyncTest( "swipe on dismissable modal closes panel", function() {
+	asyncTest( "swipe on dismissible panel does not close panel if the default is prevented",
+		function() {
+			var panel = $( "#panel-test-dismiss" ),
+				eventNs = ".swipeDoesNotClosePanel",
+				input = $( "#dismiss-input" ).one( "swipeleft", function( event ) {
+					event.preventDefault();
+				});
+
+			expect( 1 );
+
+			$.testHelper.detailedEventCascade([
+				function() {
+					panel.panel( "open" );
+				},
+
+				{
+					panelopen: { src: panel, event: "panelopen" + eventNs + "1" }
+				},
+
+				function() {
+					input.trigger( "swipeleft" );
+				},
+
+				{
+					panelclose: { src: panel, event: "panelclose" + eventNs + "2" }
+				},
+
+				function( result ) {
+					deepEqual( result.panelclose.timedOut, true,
+						"panelclose event did not happen in response to swipe on child input" );
+					panel.panel( "close" );
+				},
+
+				{
+					panelclose: { src: panel, event: "panelclose" + eventNs + "3" }
+				},
+
+				start
+			]);
+		});
+
+	asyncTest( "swipe on dismissible modal closes panel", function() {
 
 		expect( 1 );