Filterable: When all items match the filter string, show them

Fixes gh-7307

Author: Gabriel Schulhof

js/widgets/filterable.js

@@ -112,7 +112,8 @@ $.widget( "mobile.filterable", {
 		// If nothing is hidden, then the decision whether to hide or show the items
 		// is based on the "filterReveal" option.
 		if ( hide.length === 0 ) {
-			filterItems[ opts.filterReveal ? "addClass" : "removeClass" ]( "ui-screen-hidden" );
+			filterItems[ ( opts.filterReveal && val.length === 0 ) ?
+				"addClass" : "removeClass" ]( "ui-screen-hidden" );
 		} else {
 			$( hide ).addClass( "ui-screen-hidden" );
 			$( show ).removeClass( "ui-screen-hidden" );

tests/unit/filterable/filterable_core.js

@@ -27,4 +27,19 @@ test( "Filterable input prevents default on ENTER", function() {
 	deepEqual( event.isDefaultPrevented(), true, "Subsequent keypress default is also prevented" );
 });
 
+asyncTest( "filterReveal filterable shows all items when all items match filter text", function() {
+	var input = $( "#test-filter-reveal-show-all-input" ),
+		list = $( "#test-filter-reveal-show-all-list" );
+
+	expect( 1 );
+
+	input.val( "Test" ).trigger( "change" );
+
+	setTimeout( function() {
+		deepEqual( list.children( ".ui-screen-hidden" ).length, 0,
+			"All items visible when search value matches them all" );
+		start();
+	}, 500 );
+});
+
 })( jQuery );

tests/unit/filterable/index.html

@@ -57,8 +57,15 @@
 				<li>California</li>
 				<li>Oregon</li>
 			</ul>
+			<form id="test-filter-reveal-show-all-form">
+				<input id="test-filter-reveal-show-all-input">
+			</form>
+			<ul data-nstest-filter="true" data-nstest-filter-reveal="true" id="test-filter-reveal-show-all-list" data-nstest-input="#test-filter-reveal-show-all-input">
+				<li>Test 1</li>
+				<li>Test 2</li>
+				<li>Test 3</li>
+			</ul>
 		</div>
 	</div>
-
 </body>
 </html>