Permalink
Browse files

Filterable: Prevent form submission when user presses ENTER

Intercept ENTER on keydown and keypress, preventing default

Fixes gh-7240
  • Loading branch information...
gabrielschulhof committed Mar 13, 2014
1 parent c017357 commit 5b8a14f4b1ea2021ab569c9696f35c9d0e5c7f27
Showing with 42 additions and 0 deletions.
  1. +17 −0 js/widgets/filterable.js
  2. +17 −0 tests/unit/filterable/filterable_core.js
  3. +8 −0 tests/unit/filterable/index.html
View
@@ -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 ) &&
@@ -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 );
@@ -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>

0 comments on commit 5b8a14f

Please sign in to comment.