From 1e6cf1bb408acb787ebab001b4301b961b76bbed Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Fri, 25 Oct 2024 22:02:45 +0100
Subject: [PATCH] fix: ensure bind:group works as intended with proxied state
 objects (#13939)

---
 .changeset/giant-bags-wash.md                 |  5 +++++
 .../client/dom/elements/bindings/input.js     |  4 ++--
 .../samples/state-bind-group/_config.js       | 19 +++++++++++++++++++
 .../samples/state-bind-group/main.svelte      | 12 ++++++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/giant-bags-wash.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-bind-group/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-bind-group/main.svelte

diff --git a/.changeset/giant-bags-wash.md b/.changeset/giant-bags-wash.md
new file mode 100644
index 0000000000..5731e4f922
--- /dev/null
+++ b/.changeset/giant-bags-wash.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure bind:group works as intended with proxied state objects
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index 28a99f7eed..7af20b932a 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -2,7 +2,7 @@ import { DEV } from 'esm-env';
 import { render_effect, teardown } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
 import * as e from '../../../errors.js';
-import { get_proxied_value, is } from '../../../proxy.js';
+import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
 import { hydrating } from '../../hydration.js';
 import { is_runes } from '../../../runtime.js';
@@ -126,7 +126,7 @@ export function bind_group(inputs, group_index, input, get, set = get) {
 		if (is_checkbox) {
 			value = value || [];
 			// @ts-ignore
-			input.checked = get_proxied_value(value).includes(get_proxied_value(input.__value));
+			input.checked = value.includes(input.__value);
 		} else {
 			// @ts-ignore
 			input.checked = is(input.__value, value);
diff --git a/packages/svelte/tests/runtime-runes/samples/state-bind-group/_config.js b/packages/svelte/tests/runtime-runes/samples/state-bind-group/_config.js
new file mode 100644
index 0000000000..72f49c6e0e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-bind-group/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>+</button><input type="checkbox" value="1"><input type="checkbox" value="2"><input type="checkbox" value="3">\n[]`,
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.equal(target.querySelectorAll('input')[1].checked, true);
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>+</button><input type="checkbox" value="1"><input type="checkbox" value="2"><input type="checkbox" value="3">\n["2"]`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-bind-group/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-bind-group/main.svelte
new file mode 100644
index 0000000000..ca78457ee8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-bind-group/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let checkboxes = $state([]);
+	let values = ['1', '2', '3'];
+</script>
+
+<button onclick={() => checkboxes.push('2')}>+</button>
+
+{#each values as val, i}
+	<input type="checkbox" value={val} bind:group={checkboxes} />
+{/each}
+
+{JSON.stringify(checkboxes)}