From 34079a0ec57693cb419cf8ebffdb64f3ce69f24e Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sun, 5 May 2024 09:53:59 +0200
Subject: [PATCH] fix: restore value after attribute removal during hydration
 (#11465)

Fix #11457
---
 .changeset/loud-numbers-flow.md                        |  5 +++++
 .../src/internal/client/dom/elements/attributes.js     |  4 ++++
 .../fine-grained-hydration-clean-attr/_config.js       | 10 ++++++++++
 .../fine-grained-hydration-clean-attr/main.svelte      |  5 +++++
 4 files changed, 24 insertions(+)
 create mode 100644 .changeset/loud-numbers-flow.md
 create mode 100644 packages/svelte/tests/runtime-browser/samples/fine-grained-hydration-clean-attr/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/samples/fine-grained-hydration-clean-attr/main.svelte

diff --git a/.changeset/loud-numbers-flow.md b/.changeset/loud-numbers-flow.md
new file mode 100644
index 0000000000..68bd7cfe6f
--- /dev/null
+++ b/.changeset/loud-numbers-flow.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: restore value after attribute removal during hydration
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 5e39228f2b..e3816a733f 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -16,8 +16,12 @@ import * as w from '../../warnings.js';
  */
 export function remove_input_attr_defaults(dom) {
 	if (hydrating) {
+		// using getAttribute instead of dome.value allow us to have
+		// null instead of "on" if the user didn't set a value
+		const value = dom.getAttribute('value');
 		set_attribute(dom, 'value', null);
 		set_attribute(dom, 'checked', null);
+		if (value) dom.value = value;
 	}
 }
 
diff --git a/packages/svelte/tests/runtime-browser/samples/fine-grained-hydration-clean-attr/_config.js b/packages/svelte/tests/runtime-browser/samples/fine-grained-hydration-clean-attr/_config.js
new file mode 100644
index 0000000000..6602e59834
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/fine-grained-hydration-clean-attr/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../assert';
+
+export default test({
+	html: `<input type="checkbox" name="lang" value="keep" />`,
+	ssrHtml: `<input type="checkbox" name="lang" value="keep" checked />`,
+	test({ window, assert, target, mod }) {
+		const input = target.querySelector('input');
+		assert.equal(input?.checked, true);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/fine-grained-hydration-clean-attr/main.svelte b/packages/svelte/tests/runtime-browser/samples/fine-grained-hydration-clean-attr/main.svelte
new file mode 100644
index 0000000000..9dc489489b
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/fine-grained-hydration-clean-attr/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let to_check = $state("keep")
+</script>
+
+<input type="checkbox" name="lang" value="keep" checked={to_check === "keep"} />