Merge pull request #4375 from preactjs/debug/tr-warning

debug: Disallow <tr> as a child of <table>
preactjs · May 9, 2024 · c29caa3 · c29caa3
2 parents 414c870 + cfc80bf
commit c29caa3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 26 deletions.
diff --git a/debug/src/debug.js b/debug/src/debug.js
@@ -387,11 +387,10 @@ export function initDebug() {
 					type === 'tr' &&
 					domParentName !== 'thead' &&
 					domParentName !== 'tfoot' &&
-					domParentName !== 'tbody' &&
-					domParentName !== 'table'
+					domParentName !== 'tbody'
 				) {
 					console.error(
-						'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot/table> parent.' +
+						'Improper nesting of table. Your <tr> should have a <thead/tbody/tfoot> parent.' +
 							serializeVNode(vnode) +
 							`\n\n${getOwnerStack(vnode)}`
 					);

diff --git a/debug/test/browser/debug.test.js b/debug/test/browser/debug.test.js
@@ -543,12 +543,14 @@ describe('debug', () => {
 		it('Accepts minimal well formed table', () => {
 			const Table = () => (
 				<table>
-					<tr>
-						<th>Head</th>
-					</tr>
-					<tr>
-						<td>Body</td>
-					</tr>
+					<tbody>
+						<tr>
+							<th>Head</th>
+						</tr>
+						<tr>
+							<td>Body</td>
+						</tr>
+					</tbody>
 				</table>
 			);
 			render(<Table />, scratch);
@@ -586,23 +588,27 @@ describe('debug', () => {
 		it('accepts valid nested tables', () => {
 			const Table = () => (
 				<table>
-					<tr>
-						<th>foo</th>
-					</tr>
-					<tr>
-						<td id="nested">
-							<table>
-								<tr>
-									<td>cell1</td>
-									<td>cell2</td>
-									<td>cell3</td>
-								</tr>
-							</table>
-						</td>
-					</tr>
-					<tr>
-						<td>bar</td>
-					</tr>
+					<tbody>
+						<tr>
+							<th>foo</th>
+						</tr>
+						<tr>
+							<td id="nested">
+								<table>
+									<tbody>
+										<tr>
+											<td>cell1</td>
+											<td>cell2</td>
+											<td>cell3</td>
+										</tr>
+									</tbody>
+								</table>
+							</td>
+						</tr>
+						<tr>
+							<td>bar</td>
+						</tr>
+					</tbody>
 				</table>
 			);