Listview: Re-implement recursion limitation

Closes gh-7646
Fixes gh-7644
Re gh-5680

Author: Gabriel Schulhof

js/widgets/filterable.backcompat.js

@@ -6,7 +6,7 @@
 
 define( [
 	"jquery",
-	"./listview",
+	"./listview.hidedividers",
 	"./filterable" ], function( jQuery ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, undefined ) {
@@ -160,6 +160,24 @@ $.widget( "mobile.filterable", $.mobile.filterable, {
 		return ret;
 	},
 
+	// The listview implementation accompanying this filterable backcompat layer will call
+	// filterable.refresh() after it's done refreshing the listview to make sure the filterable
+	// filters out any new items added. However, when the listview refresh has been initiated by
+	// the filterable itself, then such filtering has already taken place, and calling the
+	// filterable's refresh() method will cause an infinite recursion. We stop this by setting a
+	// flag that will cause the filterable's refresh() method to short-circuit.
+	_refreshChildWidget: function() {
+		this._refreshingChildWidget = true;
+		this._superApply( arguments );
+		this._refreshingChildWidget = false;
+	},
+
+	refresh: function() {
+		if ( !this._refreshingChildWidget ) {
+			this._superApply( arguments );
+		}
+	},
+
 	_destroy: function() {
 		if ( this._isSearchInternal() ) {
 			this._search.remove();
@@ -207,29 +225,18 @@ $.widget( "mobile.listview", $.mobile.listview, {
 		return this._super();
 	},
 
-	_afterListviewRefresh: function() {
-		var filterable = this.element.data( "mobile-filterable" );
-
-		if ( this.options.filter === true && filterable ) {
-			this._preventRefreshLoop = true;
-			filterable.refresh();
-		}
-	},
-
-	// Eliminate infinite recursion caused by the fact that we call filterable.refresh() from
-	// _afterListviewRefresh() above, which, in turn, calls _refreshChildWidget(), which, in
-	// turn, calls listview refresh(), which would, in turn, calls _afterListviewRefresh()
-	// above, if we wouldn't prevent that right here.
 	refresh: function() {
-		var returnValue;
+		var filterable;
 
-		if ( !this._preventRefreshLoop ) {
-			returnValue = this._superApply( arguments );
-		}
+		this._superApply( arguments );
 
-		this._preventRefreshLoop = false;
+		if ( this.options.filter === true ) {
+			filterable = this.element.data( "mobile-filterable" );
 
-		return returnValue;
+			if ( filterable ) {
+				filterable.refresh();
+			}
+		}
 	}
 });
 

tests/unit/filterable/filterable_core.js

@@ -71,4 +71,28 @@ test( "Refreshing the listview also refreshes the filterable", function() {
 		"All list items are hidden after listview refresh" );
 });
 
+asyncTest( "Empty dividers are hidden by default", function() {
+	var input = $( "#hide-empty-dividers-input" ),
+		listview = $( "#hide-empty-dividers" );
+
+	$.testHelper.detailedEventCascade([
+		function() {
+			input.val( "l" ).trigger( "change" );
+		},
+		{
+			filterablefilter: {
+				src: listview,
+				event: "filterablebeforefilter.emptyDividersHidden1"
+			}
+		},
+		function( result ) {
+			deepEqual( result.filterablefilter.timedOut, false,
+				"filterablefilter event was triggered" );
+			deepEqual( $( "#prev-is-hidden" ).prev().hasClass( "ui-screen-hidden" ), true,
+				"Divider for hidden item is hidden" );
+			start();
+		}
+	]);
+});
+
 })( jQuery );

tests/unit/filterable/index.html

@@ -70,6 +70,25 @@
 				<li>Item 1</li>
 				<li>Item 2</li>
 			</ul>
+			<form class="ui-filterable">
+				<input id="hide-empty-dividers-input" data-nstest-type="search">
+			</form>
+			<ul id="hide-empty-dividers" data-nstest-role="listview" data-nstest-filter="true" data-nstest-input="#hide-empty-dividers-input" data-nstest-autodividers="true" data-nstest-inset="true">
+				<li><a href="#">Adele</a></li>
+				<li><a href="#">Agnes</a></li>
+				<li><a href="#">Albert</a></li>
+				<li><a href="#">Billy</a></li>
+				<li><a href="#">Bob</a></li>
+				<li><a href="#">Calvin</a></li>
+				<li><a href="#">Cameron</a></li>
+				<li><a href="#">Chloe</a></li>
+				<li><a href="#">Christina</a></li>
+				<li id="prev-is-hidden"><a href="#">Diana</a></li>
+				<li><a href="#">Gabriel</a></li>
+				<li><a href="#">Glen</a></li>
+				<li><a href="#">Ralph</a></li>
+				<li><a href="#">Valarie</a></li>
+			</ul>
 		</div>
 	</div>
 </body>