Describe the bug

Consider the following:

<script>
const options = [
	{text: "Text 1"},
	{text: "Text 2"},
	{text: "Text 3"},
]

let selected = $state(options[0])
</script>
<select bind:value={selected}>
	{#each options as option}
		<option value={option}>{option.text}</option>
	{/each}
</select>

The select element will not correctly display options[0] as being selected. This is likely due to an identity-check being used against a Proxy in Svelte internals.

To workaround this, wrap the options array in a $state rune. Using $state.frozen will not work.

I'm not sure if this is intended behaviour. If so, perhaps we should document this edge case with the workaround.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE21Ou2rEMBD8lWWTIgET59EJ2ZB_SGe5UOQ9ItBJwlofF4z-PchSrkm6eezszI4n6yihmHb0-kwo8D1G7JC_YyHpQo4JO0xhW01RZDKrjTwqb4JPDCGyDT7BAJPyinemKwtQ-EFXhheFufsrv_4vv1V5Vl55RwyJHBmmBQa4T6yZHlrZ9Dw_Ki_72xRZT-HT-kVctNto2H_TeTya7kibr9tanRrMxVQsK4OWbd7YwFOZmWVfWf3Xl3_5WHEUjdjhOSz2ZGlBwetGec4_GI8Ytl8BAAA=

Logs

No response

System Info

System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 152.89 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.1 - /opt/homebrew/bin/node
    npm: 10.4.0 - /opt/homebrew/bin/npm
    pnpm: 8.15.1 - /opt/homebrew/bin/pnpm
    bun: 1.0.26 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.91
    Safari: 17.4.1
  npmPackages:
    svelte: 5.0.0-next.118 => 5.0.0-next.118

Severity

annoyance