value for keyed select tag doesn't work when options are updated

[mynomoto]

Describe the bug
The selected value is known oncreate, but the values are added later. The selected value isn't set when they are added.

This problem is like #1764 but for value instead of bind:value.

To Reproduce
https://svelte.dev/repl/63a13fa5f6e2425a970824691919b87f?version=3.29.4
You will see three on the select element

Expected behavior
You should see two on the select element

Severity
This is annoying but there is a workaround described on #1764 (comment)

[MichealPearce]

I believe this is because the option is not available in the select element when it's set. And also, would adding a option with the attribute selected not be the proper way to set a select input's value?

[MichealPearce]

Would this work?

<script>
	import { onMount } from 'svelte'

	let items = []
	let selected = 'two'

	onMount(() => {
		setTimeout(() => {
			items = ['One', 'Two', 'Three'].map(d => ({
				slug: d.toLowerCase(),
				name: d,
			}))
		}, 1000)
	})
</script>

<h2>{selected} is selected</h2>

{#if items.length}
	<select>
		{#each items as item (item.slug)}
			<option value={item.slug} selected={item.slug === selected}>
				{item.name}
			</option>
		{/each}
	</select>
{/if}

[mynomoto]

I believe this is because the option is not available in the select element when it's set. And also, would adding a option with the attribute selected not be the proper way to set a select input's value?

This works for bind:value, and for what I read on other issues this should work for value also, it is only not working. This seems like the only inconsistency between bind:value and value.

Would this work?

<script>
	import { onMount } from 'svelte'

	let items = []
	let selected = 'two'

	onMount(() => {
		setTimeout(() => {
			items = ['One', 'Two', 'Three'].map(d => ({
				slug: d.toLowerCase(),
				name: d,
			}))
		}, 1000)
	})
</script>

<h2>{selected} is selected</h2>

{#if items.length}
	<select>
		{#each items as item (item.slug)}
			<option value={item.slug} selected={item.slug === selected}>
				{item.name}
			</option>
		{/each}
	</select>
{/if}

Save

This works, as I pointed the same workaround in the issue itself.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dummdidumm]

This will be fixed in Svelte 5