Sortable: Append a tr with td to the placeholder of tbody elements

When sorting tbody elements of a table the placeholder needs to have a tr with
td elements to be visible. The appended elements are created in the same way
as for the placeholder of a tr element; the first row of the sorted tbody is
used for that.

Fixes #10682
Closes gh-1380

2 files changed, 80 insertions, 8 deletions

diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html
index 3edc999b7..f13b895b8 100644
--- a/tests/unit/sortable/sortable.html
+++ b/tests/unit/sortable/sortable.html
@@ -74,20 +74,56 @@
 <table id="sortable-table">
 	<tbody>
 		<tr>
-			<td>1</td>
-			<td>2</td>
+			<td>1.1</td>
+			<td>1.2</td>
 		</tr>
 		<tr>
-			<td>3</td>
-			<td>4</td>
+			<td>1.3</td>
+			<td>1.4</td>
 		</tr>
 		<tr>
-			<td>5</td>
-			<td>6</td>
+			<td>1.5</td>
+			<td>1.6</td>
 		</tr>
 		<tr>
-			<td>7</td>
-			<td>8</td>
+			<td>1.7</td>
+			<td>1.8</td>
+		</tr>
+	</tbody>
+	<tbody>
+		<tr>
+			<td>2.1</td>
+			<td>2.2</td>
+		</tr>
+		<tr>
+			<td>2.3</td>
+			<td>2.4</td>
+		</tr>
+		<tr>
+			<td>2.5</td>
+			<td>2.6</td>
+		</tr>
+		<tr>
+			<td>2.7</td>
+			<td>2.8</td>
+		</tr>
+	</tbody>
+	<tbody>
+		<tr>
+			<td>3.1</td>
+			<td>3.2</td>
+		</tr>
+		<tr>
+			<td>3.3</td>
+			<td>3.4</td>
+		</tr>
+		<tr>
+			<td>3.5</td>
+			<td>3.6</td>
+		</tr>
+		<tr>
+			<td>3.7</td>
+			<td>3.8</td>
 		</tr>
 	</tbody>
 </table>
diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/sortable_options.js
index f2beb4dbc..90cf765a2 100644
--- a/tests/unit/sortable/sortable_options.js
+++ b/tests/unit/sortable/sortable_options.js
@@ -388,6 +388,42 @@ test( "{ placholder: String } tr", function() {
 	});
 });
 
+test( "{ placholder: String } tbody", function() {
+	expect( 6 );
+
+	var originalWidths,
+		element = $( "#sortable-table" ).sortable({
+			placeholder: "test",
+			start: function( event, ui ) {
+				var currentWidths = otherBody.children().map(function() {
+					return $( this ).width();
+				}).get();
+				ok( ui.placeholder.hasClass( "test" ), "placeholder has class" );
+				deepEqual( currentWidths, originalWidths, "table cells maintain size" );
+				equal( ui.placeholder.children().length, 1,
+					"placeholder has one child" );
+				equal( ui.placeholder.children( "tr" ).length, 1,
+					"placeholder's child is tr" );
+				equal( ui.placeholder.find( "> tr" ).children().length,
+					dragBody.find( "> tr:first" ).children().length,
+					"placeholder's tr has correct number of cells" );
+				equal( ui.placeholder.find( "> tr" ).children().html(),
+					$( "<span>&#160;</span>" ).html(),
+					"placeholder td has content for forced dimensions" );
+			}
+		}),
+		bodies = element.children( "tbody" ),
+		dragBody = bodies.eq( 0 ),
+		otherBody = bodies.eq( 1 );
+
+	originalWidths = otherBody.children().map(function() {
+		return $( this ).width();
+	}).get();
+	dragBody.simulate( "drag", {
+		dy: 1
+	});
+});
+
 /*
 test("{ revert: false }, default", function() {
 	ok(false, "missing test - untested code is broken code.");