fix: treat inert as a boolean attribute (#14935)

* fix: treat `inert` as a boolean attribute fixes #14731 * remove solo: true --------- Co-authored-by: Rich Harris <[email protected]>
sveltejs · Jan 7, 2025 · 8241096 · 8241096
1 parent c8865bb
commit 8241096
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/.changeset/quiet-planets-carry.md b/.changeset/quiet-planets-carry.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat `inert` as a boolean attribute
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
@@ -156,6 +156,7 @@ const DOM_BOOLEAN_ATTRIBUTES = [
 	'formnovalidate',
 	'hidden',
 	'indeterminate',
+	'inert',
 	'ismap',
 	'loop',
 	'multiple',
@@ -214,7 +215,6 @@ const DOM_PROPERTIES = [
 	'playsInline',
 	'readOnly',
 	'value',
-	'inert',
 	'volume',
 	'defaultValue',
 	'defaultChecked',

diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/_config.js
@@ -1,14 +1,21 @@
-import { ok, test } from '../../test';
+import { test } from '../../test';
 
 export default test({
+	ssrHtml: `
+		<div></div>
+		<div inert="">some div <button>click</button></div>
+	`,
+
 	get props() {
 		return { inert: true };
 	},
+
 	test({ assert, target, component }) {
-		const div = target.querySelector('div');
-		ok(div);
-		assert.ok(div.inert);
+		const [div1, div2] = target.querySelectorAll('div');
+		assert.ok(!div1.inert);
+		assert.ok(div2.inert);
+
 		component.inert = false;
-		assert.ok(!div.inert);
+		assert.ok(!div2.inert);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-inert/main.svelte
@@ -2,4 +2,5 @@
 export let inert;
 </script>
 
+<div inert={false}></div>
 <div {inert}>some div <button>click</button></div>