Checkbox's onclick does not update own state

[major-major-major-major]

Describe the bug

I want to derive the value of a checkbox from a state.

When an onclick handler (with preventDefault) changes its own checked state, it does not seem to be applied.

This seems like a bug.
If it is intended behavior, can anyone point out a reason or explanation?

The reason why I need the preventDefault() in my production use case is that I would like to only set the checked state if other conditions are met, not just as a direct consequence of the click.

<script>
	let on = $state(true);
	const toggle = () => {
		on = !on;
	}
</script>

<h1>Switches! on={on}</h1>

<label>
	<input
		checked={on}
		type=checkbox
		onclick={(evt) => {
			evt.preventDefault();
			toggle();
		}}
	>
	on
</label>
<br>
<button onclick={() => toggle()}>
	{on ? "on" : "off"}
</button>

Reproduction

Steps to reproduce the issue in the REPL:

1. click on the checkbox
2. observe that it changes the state in the header and button
3. observe that it does not check the checkbox (whose value is derived from the same state)

https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAACm1QPU_DMBD9K-6JIZVQI9aQBCExsDNiBie5tFaNHcWXtijKf-d8oZSBJXLe3fu6Gbz5RCjgFZ0L6hxG16kMO0vYbeEeeuswQvE-A30NaS8BjP-wnodhF0_oKGGNifgf3gZP6IlloIztaAeqtdfkkFTwqlJ3kQxhRuOE28c0YUIkRWG_d8jzbKuqWs1pokkYm-BlcdG-zG-Svjw81G9nS-0B44bFqzn4pcwZlakzDTrxLq0fJloVebk9Yie7K5KqVgI34XK1bZ1tj9Wc4Yn-5tHEwG4Y8cQVX7A3k6NsrSFSUuIXWMRBIoSUKL9GKptRvhOlhjc3sbqKLELknOpJaWABUEV69L0GOcVKr_nmhBeCIp10-eA_Y93Z-g6K3riIyzcfB0c29gEAAA==

Logs

System Info

see REPL URL:

Svelte `version=5.38.6`

reproducable without any special setup

Severity

annoyance

[7nik]

Guess it is some browser work nuance: when the checkbox is clicked, it in fact switches, but calling preventDefault switches it back, but not immediately, but after Svelte syncs it with on.

[instantiatedwalrus]

This works https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAAA21QTWvDMAz9K6oYNIXQ0muWZAx22H3HZQfXURpTVw6x-kXIfx-2adfDMDbm6T3p6U3I6khY4CdZ6-DiRttCRq0RaleYY2cseSy-J5TbEHgBwPyueh-GtT-TlYDtlKf_cO1YiMVjgaXXoxmkbrgRcxzcKDCBGH2AGbrRHWGZVMvXwAjXkoBjqODFixLKZDzRKla1Yy8gbr-3BBVkK6hqmKJOomLhOBLnhsvN32Au-239dTGie_ILcFxNjudy029T1aod2eiwNDycJHXUPekDtZGbkBBIFeGdu97Hamv0oZqUv7GGjM7y7KoROst6GOlMLB_UqZOVLC0TjrooIzGNJzDt9wDmODy6c8Hs5u623I3xPUlY_mEkpXJvMkfh5BjeoEHHDUIRPl3XYEwpyWvMUegqWIS0558cRRl7Mdxi0Snraf4FJ3oXFjcCAAA=

[major-major-major-major]

Guess it is some browser work nuance: when the checkbox is clicked, it in fact switches, but calling preventDefault switches it back, but not immediately, but after Svelte syncs it with on.

Didn't even occur to me that that could be a possibility. Thanks for taking a look!

Just for completeness, here's an example demonstrating the same behavior ("basically") without Svelte:

<h1>Switch!</h1>

<label>
	<input
		type=checkbox
		onclick={(evt) => {
			evt.preventDefault();
			document.querySelector("input").checked = !document.querySelector("input").checked;
		}}
	>
	on
</label>
<br>
<button onclick={() => document.querySelector("input").checked = !document.querySelector("input").checked}>toggle</button>

REPL

[7nik]

I checked, and in Vue and Solid.js the behavior is the same.