fix: ensure bind_checked defers mutation to ensure reactive graph stability

Author: trueadm

.changeset/happy-eggs-rest.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure bind_checked defers mutation to ensure reactive graph stability

packages/svelte/src/internal/client/dom/elements/bindings/input.js

@@ -180,9 +180,14 @@ export function bind_checked(input, get, set = get) {
 		set(value);
 	});
 
-	if (get() == undefined) {
-		set(false);
-	}
+	// We defer setting the value as we might already be in an active
+	// block like an each block where that effect hasn't yet hooked up
+	// to the reactivity graph
+	queue_micro_task(() => {
+		if (get() == undefined) {
+			set(false);
+		}
+	});
 
 	render_effect(() => {
 		var value = get();

packages/svelte/tests/runtime-runes/samples/checkbox-binding-derived/_config.js

@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		button?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Add</button><label><input type="checkbox">\n1</label><label><input type="checkbox">\nfoo</label>`
+		)
+	}
+});

packages/svelte/tests/runtime-runes/samples/checkbox-binding-derived/checkbox.svelte

@@ -0,0 +1,8 @@
+<script>
+  let { value = $bindable(), config } = $props();
+</script>
+
+<label>
+  <input type="checkbox" bind:checked={value} />
+  {config.title}
+</label>

packages/svelte/tests/runtime-runes/samples/checkbox-binding-derived/main.svelte

@@ -0,0 +1,34 @@
+<script>
+	import Checkbox from './checkbox.svelte';
+
+	let foo = $state({})
+
+	const schema = $state({
+    properties: {
+      foo: true,
+    },
+  })
+
+	function retrieveSchema(schema, value) {
+		const cloned = { ...schema, properties: { ...schema.properties } }
+		for (const key of Object.keys(value)) {
+			cloned.properties[key] = key
+		}
+		return cloned
+	}
+
+	const retrieved = $derived(retrieveSchema(schema, foo));
+	const required = $derived(new Set(retrieved.required));
+	const properties = $derived(retrieved.properties);
+	const keys = $derived(Object.keys(properties));
+	let nextKey = 1;
+</script>
+
+<button onclick={() => {
+	foo[nextKey++] = true
+}}>Add</button>
+
+{#each keys as key (key)}
+	{@const config = { title: key, required: required.has(key) }}
+	<Checkbox bind:value={foo[key]} {config} />
+{/each}