diff --git a/debug/src/debug.js b/debug/src/debug.js
index 45cc67c3e5..56998711a1 100644
--- a/debug/src/debug.js
+++ b/debug/src/debug.js
@@ -353,7 +353,13 @@ export function initDebug() {
});
}
- if (typeof type === 'string' && (isTableElement(type) || type === 'p')) {
+ if (
+ typeof type === 'string' &&
+ (isTableElement(type) ||
+ type === 'p' ||
+ type === 'a' ||
+ type === 'button')
+ ) {
// Avoid false positives when Preact only partially rendered the
// HTML tree. Whilst we attempt to include the outer DOM in our
// validation, this wouldn't work on the server for
@@ -387,11 +393,10 @@ export function initDebug() {
type === 'tr' &&
domParentName !== 'thead' &&
domParentName !== 'tfoot' &&
- domParentName !== 'tbody' &&
- domParentName !== 'table'
+ domParentName !== 'tbody'
) {
console.error(
- 'Improper nesting of table. Your
should have a parent.' +
+ 'Improper nesting of table. Your
should have a parent.' +
serializeVNode(vnode) +
`\n\n${getOwnerStack(vnode)}`
);
@@ -421,6 +426,16 @@ export function initDebug() {
`\n\n${getOwnerStack(vnode)}`
);
}
+ } else if (type === 'a' || type === 'button') {
+ if (getDomChildren(vnode).indexOf(type) !== -1) {
+ console.error(
+ `Improper nesting of interactive content. Your <${type}>` +
+ ` should not have other ${type === 'a' ? 'anchor' : 'button'}` +
+ ' tags as child-elements.' +
+ serializeVNode(vnode) +
+ `\n\n${getOwnerStack(vnode)}`
+ );
+ }
}
}
diff --git a/debug/test/browser/debug.test.js b/debug/test/browser/debug.test.js
index cd4b4d9bd8..fa318697d8 100644
--- 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 = () => (