Filter: Add filter_resetOnEsc option. See #1126

docs/example-widget-filter.html

@@ -112,6 +112,9 @@
 			// jQuery selector string of an element used to reset the filters
 			filter_reset : 'button.reset',
 
+			// Reset filter input when the user presses escape - normalized across browsers
+			filter_resetOnEsc : true,
+
 			// Use the $.tablesorter.storage utility to save the most recent filters (default setting is false)
 			filter_saveFilters : true,
 
@@ -228,6 +231,7 @@ $(function(){
 		<h3 id="notes"><a href="#">Notes</a></h3>
 		<div>
 			<ul>
+				<li>In <span class="version">v2.25.2</span>, added <a class="intlink" href="#filter-resetonesc"><code>filter_resetOnEsc</code></a> option.</li>
 				<li>In <span class="version">v2.22.2</span>,
 					<ul>
 						<li>The <a class="intlink" href="#method-get-filters"><code>getFilters</code></a> function will now target the last used filter properly.</li>
@@ -513,6 +517,12 @@ $(function(){
 						<td>jQuery selector string of an element used to reset the filters (v2.4; <span class="version updated">v2.16.0</span>).</td>
 					</tr>
 
+					<tr id="filter-resetonesc">
+						<td><span class="permalink">filter_resetOnEsc</span></td>
+						<td>true</td>
+						<td>Press escape to clear filter input - normalized across browsers (<span class="version">v2.25.2</span>).</td>
+					</tr>
+
 					<tr id="filter-save-filters">
 						<td><span class="permalink">filter_saveFilters</span></td>
 						<td>false</td>

docs/index.html

@@ -458,7 +458,7 @@
 		<li><a href="example-widget-column-selector.html">Column selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.25.1</span>).</li>
 		<li><a href="example-widget-editable.html">Content editable widget</a> (v2.9; <span class="version updated">v2.25.0</span>).</li>
 		<li><span class="label label-info">Beta</span> <a href="example-dragtable.html">Dragtable mod</a>  - (jQuery UI widget for column reordering [<a href="http://stackoverflow.com/a/27770224/145346">ref</a>]; <span class="version">v2.24.0</span>).</li>
-		<li><span class="results">&dagger;</span> Filter widget (<span class="version updated">v2.25.1</span>):
+		<li><span class="results">&dagger;</span> Filter widget (<span class="version updated">v2.25.2</span>):
 			<ul>
 				<li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.23.5</span>).</li>
 				<li><a href="example-widget-filter-any-match.html">external option (match any column)</a> (<span class="version">v2.13.3</span>; <span class="version updated">v2.22.0</span>).</li>
@@ -1901,6 +1901,8 @@ $(function(){
       filter_placeholder   : { search : '', select : '' },
       // jQuery selector string of an element used to reset the filters.
       filter_reset         : null,
+      // Reset filter input when the user presses escape - normalized across browsers
+      filter_resetOnEsc    : true,
       // Use the $.tablesorter.storage utility to save the most recent filters
       filter_saveFilters   : false,
       // typing delay in milliseconds before starting a search.
@@ -2963,6 +2965,20 @@ filter_cssFilter : [ '', 'hidden', '', 'hidden' ]</pre>
 				<td><a href="example-widget-filter-custom.html">Example</a></td>
 			</tr>
 
+			<tr id="widget-filter-resetonesc">
+				<td><a href="#" class="permalink">filter_resetOnEsc</a></td>
+				<td>Boolean</td>
+				<td>true</td>
+				<td>
+					Filter widget: when <code>true</code>, normalize pressing escape to clear filter input across browsers (<span class="version">v2.25.2</span>).
+					<div class="collapsible">
+						<p>Webkit browsers automatically clear the filter search input when pressing escape, but IE and Firefox do not. Setting this option to <code>true</code>, clears the filter input when the user presses escape.</p>
+						When this option is set to <code>false</code>, pressing escape inside the search field is ignored.
+					</div>
+				</td>
+				<td></td>
+			</tr>
+
 			<tr id="widget-filter-savefilters">
 				<td><a href="#" class="permalink">filter_saveFilters</a></td>
 				<td>Boolean</td>

js/jquery.tablesorter.js

@@ -190,6 +190,10 @@
 			bottom   : false
 		},
 
+		keyCodes : {
+			enter : 13
+		},
+
 		// placeholder date parser data (globalize)
 		dates : {},
 
@@ -458,7 +462,7 @@
 				// only recognize left clicks
 				if ( ( ( e.which || e.button ) !== 1 && !type.match( ' ' + c.pointerClick + ' | sort | keyup ' ) ) ||
 					// allow pressing enter
-					( type === ' keyup ' && e.which !== 13 ) ||
+					( type === ' keyup ' && e.which !== ts.keyCodes.enter ) ||
 					// allow triggering a click event (e.which is undefined) & ignore physical clicks
 					( type.match( ' ' + c.pointerClick + ' ' ) && typeof e.which !== 'undefined' ) ) {
 					return;

js/widgets/widget-filter.js

@@ -1,4 +1,4 @@
-/*! Widget: filter - updated 1/10/2016 (v2.25.1) *//*
+/*! Widget: filter - updated 1/14/2016 (v2.25.2) *//*
  * Requires tablesorter v2.8+ and jQuery 1.7+
  * by Rob Garrison
  */
@@ -6,7 +6,8 @@
 	'use strict';
 	var tsf, tsfRegex,
 		ts = $.tablesorter || {},
-		tscss = ts.css;
+		tscss = ts.css,
+		tskeyCodes = ts.keyCodes;
 
 	$.extend( tscss, {
 		filterRow      : 'tablesorter-filter-row',
@@ -15,6 +16,14 @@
 		filterRowHide  : 'hideme'
 	});
 
+	$.extend( tskeyCodes, {
+		backSpace : 8,
+		escape : 27,
+		space : 32,
+		left : 37,
+		down : 40
+	});
+
 	ts.addWidget({
 		id: 'filter',
 		priority: 50,
@@ -39,6 +48,7 @@
 			filter_onlyAvail     : 'filter-onlyAvail', // a header with a select dropdown & this class name will only show available ( visible ) options within the drop down
 			filter_placeholder   : { search : '', select : '' }, // default placeholder text ( overridden by any header 'data-placeholder' setting )
 			filter_reset         : null,  // jQuery selector string of an element used to reset the filters
+			filter_resetOnEsc    : true,  // Reset filter input when the user presses escape - normalized across browsers
 			filter_saveFilters   : false, // Use the $.tablesorter.storage utility to save the most recent filters
 			filter_searchDelay   : 300,   // typing delay in milliseconds before starting a search
 			filter_searchFiltered: true,  // allow searching through already filtered rows in special circumstances; will speed up searching in large tables if true
@@ -747,18 +757,25 @@
 				ts.setFilters( table, c.$table.data( 'lastSearch' ) || [], internal === false );
 			}
 			// unbind events
-			tmp = ( 'keypress keyup search change '.split( ' ' ).join( namespace + ' ' ) );
+			tmp = ( 'keypress keyup keydown search change input '.split( ' ' ).join( namespace + ' ' ) );
 			$el
 			// use data attribute instead of jQuery data since the head is cloned without including
 			// the data/binding
 			.attr( 'data-lastSearchTime', new Date().getTime() )
 			.unbind( tmp.replace( ts.regex.spaces, ' ' ) )
-			// include change for select - fixes #473
+			.bind( 'keydown' + namespace, function( event ) {
+				if ( event.which === tskeyCodes.escape && !wo.filter_resetOnEsc ) {
+					// prevent keypress event
+					return false;
+				}
+			})
 			.bind( 'keyup' + namespace, function( event ) {
+				var column = parseInt( $( this ).attr( 'data-column' ), 10 );
 				$( this ).attr( 'data-lastSearchTime', new Date().getTime() );
 				// emulate what webkit does.... escape clears the filter
-				if ( event.which === 27 ) {
+				if ( event.which === tskeyCodes.escape ) {
-					this.value = '';
+					// make sure to restore the last value on escape
+					this.value = wo.filter_resetOnEsc ? '' : c.lastSearch[column];
 				// live search
 				} else if ( wo.filter_liveSearch === false ) {
 					return;
@@ -767,19 +784,21 @@
 					// liveSearch can contain a min value length; ignore arrow and meta keys, but allow backspace
 					( typeof wo.filter_liveSearch === 'number' && this.value.length < wo.filter_liveSearch ) ||
 					// let return & backspace continue on, but ignore arrows & non-valid characters
-					( event.which !== 13 && event.which !== 8 &&
+					( event.which !== tskeyCodes.enter && event.which !== tskeyCodes.backSpace &&
-						( event.which < 32 || ( event.which >= 37 && event.which <= 40 ) ) ) ) ) {
+						( event.which < tskeyCodes.space || ( event.which >= tskeyCodes.left && event.which <= tskeyCodes.down ) ) ) ) ) {
 					return;
 				}
 				// change event = no delay; last true flag tells getFilters to skip newest timed input
 				tsf.searching( table, true, true );
 			})
-			.bind( 'search change keypress '.split( ' ' ).join( namespace + ' ' ), function( event ) {
+			// include change for select - fixes #473
+			.bind( 'search change keypress input '.split( ' ' ).join( namespace + ' ' ), function( event ) {
 				// don't get cached data, in case data-column changes dynamically
 				var column = parseInt( $( this ).attr( 'data-column' ), 10 );
 				// don't allow 'change' event to process if the input value is the same - fixes #685
-				if ( wo.filter_initialized && ( event.which === 13 || event.type === 'search' ||
+				if ( wo.filter_initialized && ( event.which === tskeyCodes.enter || event.type === 'search' ||
-					event.type === 'change' && this.value !== c.lastSearch[column] ) ) {
+					// only "input" event fires in MS Edge when clicking the "x" to clear the search
+					( event.type === 'change' || event.type === 'input' ) && this.value !== c.lastSearch[column] ) ) {
 					event.preventDefault();
 					// init search with no delay
 					$( this ).attr( 'data-lastSearchTime', new Date().getTime() );