Merge pull request #4193 from preactjs/debug-nested-tables

preactjs · Nov 6, 2023 · 3c5aad6 · 3c5aad6
2 parents 9a9967d + e471ce1
commit 3c5aad6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/debug/src/debug.js b/debug/src/debug.js
@@ -341,7 +341,14 @@ export function initDebug() {
 			// with false positives, which we'd like to avoid.
 			let domParentName = getClosestDomNodeParentName(parent);
 			if (domParentName !== '') {
-				if (type === 'table' && isTableElement(domParentName)) {
+				if (
+					type === 'table' &&
+					// Tables can be nested inside each other if it's inside a cell.
+					// See https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#nesting_tables
+					domParentName !== 'td' &&
+					isTableElement(domParentName)
+				) {
+					console.log(domParentName, parent._dom);
 					console.error(
 						'Improper nesting of table. Your <table> should not have a table-node parent.' +
 							serializeVNode(vnode) +

diff --git a/debug/test/browser/debug.test.js b/debug/test/browser/debug.test.js
@@ -550,6 +550,33 @@ describe('debug', () => {
 			render(<Table />, scratch);
 			expect(console.error).to.be.calledOnce;
 		});
+
+		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>
+				</table>
+			);
+
+			render(<Table />, scratch);
+			expect(console.error).to.not.be.called;
+		});
 	});
 
 	describe('paragraph nesting', () => {