Filterable: Instantiate on data-filter="true" listview for backcompat

(cherry picked from commit f2c2128)

Closes gh-7311
Fixes gh-6911

Author: Gabriel Schulhof

js/widgets/filterable.backcompat.js

@@ -6,6 +6,7 @@
 
 define( [
 	"jquery",
+	"./listview",
 	"./filterable" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
@@ -189,6 +190,24 @@ $.widget( "mobile.filterable", $.mobile.filterable, {
 	}
 });
 
+// Instantiate a filterable on a listview that has the data-filter="true" attribute
+// This is not necessary for static content, because the auto-enhance takes care of instantiating
+// the filterable upon encountering data-filter="true". However, because of 1.3.x it is expected
+// that a listview with data-filter="true" will be filterable even if you just instantiate a
+// listview on it. The extension below ensures that this continues to happen in 1.4.x.
+$.widget( "mobile.listview", $.mobile.listview, {
+	options: {
+		filter: false
+	},
+	_create: function() {
+		if ( this.options.filter === true &&
+				!this.element.data( "mobile-filterable" ) ) {
+			this.element.filterable();
+		}
+		return this._super();
+	}
+});
+
 })( jQuery );
 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
 });

tests/unit/filterable/filterable_core.js

@@ -4,6 +4,23 @@
 
 ( function( $ ){
 
+module( "Filterable tests" );
+
+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 );
+});
+
 module( "Backwards compatibility tests" );
 
 test( "Listview with filter has hideDividers option set to true", function() {
@@ -27,17 +44,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 );
+asyncTest( "Working filterable is instantiated on dynamic listview when data-filter='true'", function() {
+	var list = $( "<ul data-nstest-filter='true'><li>Chicago</li><li>Berlin</li><li>Windsor</li></ul>" )
+			.appendTo( "#content" )
+			.listview(),
+		input = list.prev().find( "input" );
 
-	input.val( "Test" ).trigger( "change" );
+	expect( 3 );
 
+	deepEqual( !!list.data( "mobile-filterable" ), true, "Filterable widget is present on listview" );
+	input.val( "o" ).trigger( "change" );
 	setTimeout( function() {
-		deepEqual( list.children( ".ui-screen-hidden" ).length, 0,
-			"All items visible when search value matches them all" );
+		deepEqual( list.children( ".ui-screen-hidden" ).length, 1, "One child was hidden" );
+		deepEqual( list.children( ".ui-screen-hidden" ).text(), "Berlin", "'Berlin' was hidden" );
 		start();
 	}, 500 );
 });

tests/unit/filterable/index.html

@@ -46,7 +46,7 @@
 	<div id="qunit"></div>
 
 	<div data-nstest-role="page">
-		<div class="ui-content">
+		<div id="content" class="ui-content">
 			<div id="hidedividers-option-test" data-nstest-role="listview" data-nstest-filter="true">
 			</div>
 			<form id="test-input-preventDefault-form">