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...
1 parent c017357 commit 5b8a14f4b1ea2021ab569c9696f35c9d0e5c7f27 @gabrielschulhof gabrielschulhof committed Mar 13, 2014
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
@@ -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.