Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

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

Merged
merged 2 commits into from
Apr 10, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion js/widgets/filterable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" );
Expand Down
15 changes: 15 additions & 0 deletions tests/unit/filterable/filterable_core.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
9 changes: 8 additions & 1 deletion tests/unit/filterable/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>