From 32c4e4706005bbaec3ff000fb2361b66013d3778 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 29 Jul 2024 15:32:09 +0200
Subject: [PATCH] fix: always set draggable through `setAttribute` to avoid
 weird behavior (#12649)

Closes #12643

Very weird behaviour from the draggable setter...if you set element.draggable="false" it will actually set draggable to true (the boolean).
---
 .changeset/wild-poems-design.md                 |  5 +++++
 .../internal/client/dom/elements/attributes.js  |  5 +++--
 .../samples/svelte-element-draggable/_config.js | 17 +++++++++++++++++
 .../svelte-element-draggable/main.svelte        |  7 +++++++
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/wild-poems-design.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte

diff --git a/.changeset/wild-poems-design.md b/.changeset/wild-poems-design.md
new file mode 100644
index 0000000000..e973ab9518
--- /dev/null
+++ b/.changeset/wild-poems-design.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always set draggable through `setAttribute` to avoid weird behavior
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 7c8c0d8107..1321470062 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -341,9 +341,10 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
  * because updating them through the property setter doesn't work reliably.
  * In the example of `width`/`height`, the problem is that the setter only
  * accepts numeric values, but the attribute can also be set to a string like `50%`.
- * If this list becomes too big, rethink this approach.
+ * In case of draggable trying to set `element.draggable='false'` will actually set
+ * draggable to `true`. If this list becomes too big, rethink this approach.
  */
-var always_set_through_set_attribute = ['width', 'height'];
+var always_set_through_set_attribute = ['width', 'height', 'draggable'];
 
 /** @type {Map<string, string[]>} */
 var setters_cache = new Map();
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js
new file mode 100644
index 0000000000..589e079b16
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js
@@ -0,0 +1,17 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<div draggable="false"></div><div draggable="false"></div>`,
+
+	async test({ assert, target, logs }) {
+		const [div, div2] = target.querySelectorAll('div');
+		ok(div);
+		ok(div2);
+
+		assert.deepEqual(div.getAttribute('draggable'), 'false');
+		assert.deepEqual(div.draggable, false);
+		assert.deepEqual(div2.getAttribute('draggable'), 'false');
+		assert.deepEqual(div2.draggable, false);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte
new file mode 100644
index 0000000000..37e655cb15
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let attrs = $state({ draggable: 'false' });
+</script>
+
+<svelte:element this={'div'} draggable="false"></svelte:element>
+
+<div {...attrs}></div>