Filterable: Prevent form submission when user presses ENTER

Intercept ENTER on keydown and keypress, preventing default

Fixes gh-7240

Author: Gabriel Schulhof

js/widgets/filterable.js

@@ -161,6 +161,8 @@ $.widget( "mobile.filterable", {
 				this.document.find( selector );
 
 			this._on( search, {
+				keydown: "_onKeyDown",
+				keypress: "_onKeyPress",
 				keyup: "_onKeyUp",
 				change: "_onKeyUp",
 				input: "_onKeyUp"
@@ -170,6 +172,21 @@ $.widget( "mobile.filterable", {
 		this._search = search;
 	},
 
+	// Prevent form submission
+	_onKeyDown: function( event ) {
+		if ( event.keyCode === $.ui.keyCode.ENTER ) {
+			event.preventDefault();
+			this._preventKeyPress = true;
+		}
+	},
+
+	_onKeyPress: function( event ) {
+		if ( this._preventKeyPress ) {
+			event.preventDefault();
+			this._preventKeyPress = false;
+		}
+	},
+
 	_setOptions: function( options ) {
 		var refilter = !( ( options.filterReveal === undefined ) &&
 				( options.filterCallback === undefined ) &&

tests/unit/filterable/filterable_core.js

@@ -10,4 +10,21 @@ test( "Listview with filter has hideDividers option set to true", function() {
 	deepEqual( $( "#hidedividers-option-test" ).listview( "option", "hideDividers" ), true );
 });
 
+test( "Filterable input prevents default on ENTER", function() {
+	var event = $.Event( "keydown" ),
+		input = $( "#test-input-preventDefault" );
+
+	event.keyCode = $.ui.keyCode.ENTER;
+
+	input.trigger( event );
+
+	deepEqual( event.isDefaultPrevented(), true, "keydown for ENTER default is prevented" );
+
+	event = $.Event( "keypress" );
+
+	input.trigger( event );
+
+	deepEqual( event.isDefaultPrevented(), true, "Subsequent keypress default is also prevented" );
+});
+
 })( jQuery );

tests/unit/filterable/index.html

@@ -49,6 +49,14 @@
 		<div class="ui-content">
 			<div id="hidedividers-option-test" data-nstest-role="listview" data-nstest-filter="true">
 			</div>
+			<form id="test-input-preventDefault-form">
+				<input id="test-input-preventDefault">
+			</form>
+			<ul data-nstest-filter="true" id="test-input-preventDefault-list" data-nstest-input="#test-input-preventDefault">
+				<li>Alabama</li>
+				<li>California</li>
+				<li>Oregon</li>
+			</ul>
 		</div>
 	</div>