Collapsible: Use more conservative selector to avoid recursion

(cherry picked from commit b1a3ca6) Fixes gh-7413
jquery-archive · Jul 31, 2014 · ebb6b41 · ebb6b41
1 parent 901c8ff
commit ebb6b41
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 2 deletions.
diff --git a/js/widgets/collapsible.js b/js/widgets/collapsible.js
@@ -58,9 +58,9 @@ $.widget( "mobile.collapsible", {
 		this._renderedOptions = this._getOptions( this.options );
 
 		if ( this.options.enhanced ) {
-			ui.heading = $( ".ui-collapsible-heading", this.element[ 0 ] );
+			ui.heading = this.element.children( ".ui-collapsible-heading" );
 			ui.content = ui.heading.next();
-			ui.anchor = $( "a", ui.heading[ 0 ] ).first();
+			ui.anchor = ui.heading.children();
 			ui.status = ui.anchor.children( ".ui-collapsible-heading-status" );
 		} else {
 			this._enhance( elem, ui );

diff --git a/tests/unit/collapsible/collapsible_core.js b/tests/unit/collapsible/collapsible_core.js
@@ -0,0 +1,20 @@
+test( "Pre-rendered nested collapsibles are enhanced correctly", function() {
+	var outerWidget = $( "#outer" ).collapsible().data( "mobile-collapsible" ),
+		innerWidget = $( "#inner" ).collapsible().data( "mobile-collapsible" );
+
+	deepEqual( outerWidget._ui.heading.length, 1, "Outer heading consists of one element" );
+	deepEqual( outerWidget._ui.heading[ 0 ], $( "#outer-heading" )[ 0 ],
+		"Outer heading consists of the right element" );
+
+	deepEqual( outerWidget._ui.content.length, 1, "Outer content consists of one element" );
+	deepEqual( outerWidget._ui.content[ 0 ], $( "#outer-content" )[ 0 ],
+		"Outer content consists of the right element" );
+
+	deepEqual( outerWidget._ui.anchor.length, 1, "Outer anchor consists of one element" );
+	deepEqual( outerWidget._ui.anchor[ 0 ], $( "#outer-anchor" )[ 0 ],
+		"Outer anchor consists of the right element" );
+
+	deepEqual( outerWidget._ui.status.length, 1, "Outer anchor consists of one element" );
+	deepEqual( outerWidget._ui.status[ 0 ], $( "#outer-status" )[ 0 ],
+		"Outer status consists of the right element" );
+});
diff --git a/tests/unit/collapsible/index.html b/tests/unit/collapsible/index.html
@@ -0,0 +1,56 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery Mobile Controlgroup Test Suite</title>
+
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../js/requirejs.config.js"></script>
+	<script src="../../../js/jquery.tag.inserter.js"></script>
+	<script src="../../../tests/jquery.testHelper.js"></script>
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script>
+		$.testHelper.asyncLoad([
+			[ "widgets/collapsible" ],
+			[ "../../jquery.setNameSpace.immediately.js" ],
+			[ "collapsible_core.js" ]
+		]);
+	</script>
+
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css"/>
+	<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
+	<link rel="stylesheet" href="../../jqm-tests.css"/>
+
+	<script src="../../swarminject.js"></script>
+</head>
+<body>
+
+	<div id="qunit"></div>
+
+	<div id="outer" data-nstest-role="collapsible" data-nstest-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed ui-collapsible-themed-content">
+		<h4 id="outer-heading" class="ui-collapsible-heading ui-collapsible-heading-collapsed">
+			<a id="outer-anchor" href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">
+			Outer
+			<div id="outer-status" class="ui-collapsible-heading-status"> click to expand contents</div>
+			</a>
+		</h4>
+		<div id="outer-content" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
+
+			<div id="inner" data-nstest-role="collapsible" data-nstest-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed ui-collapsible-themed-content">
+				<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
+					<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">
+					Inner
+					<div class="ui-collapsible-heading-status"> click to expand contents</div>
+					</a>
+				</h4>
+				<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
+				<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+</body>
+</html>