Inconsistency between Svelte Repl and actual Svelte

[MrAmericanMike]

Describe the bug

So first I though maybe I was doing something wrong (And maybe I am)

But I noticed that this works on Svelte Repl but not on Svelte.

https://svelte.dev/repl/bb2b4e58912649bfbd5b00ed58a36969?version=3.35.0

While that works on Repl and we see the option with id 2 been selected by default, when using the exact same code in Svelte this doesn't happen, and instead Please select an option... is selected.

This can be solved in Svelte by changing the bind:value on the select element to a bind:this and the on change using selectedId.value to get the newly selected element.

Anyone know why this inconsistency happens?

(I'm guessing it's related to life cycles, but not sure)

Reproduction

https://svelte.dev/repl/bb2b4e58912649bfbd5b00ed58a36969?version=3.35.0

Logs

No response

System Info

Edge: Spartan (44.22621.730.0), Chromium (100.0.1185.36)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: 3.55.1 => 3.55.1

Severity

annoyance

[coryvirok]

I just tried using the same svelte version that you're using locally and the repl appears to also exhibit the bug. So I think it's a bug in svelte version > 3.35.0 and <=3.55.1.

https://svelte.dev/repl/bb2b4e58912649bfbd5b00ed58a36969?version=3.55.1

[coryvirok]

After playing with some different versions it appears to happen starting with version 3.42.2. Which means it was probably introduced by #6126.

https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3422

[wngasinur]

I just tried using the same svelte version that you're using locally and the repl appears to also exhibit the bug. So I think it's a bug in svelte version > 3.35.0 and <=3.55.1.

https://svelte.dev/repl/bb2b4e58912649bfbd5b00ed58a36969?version=3.55.1

no, it's not the same issue. and i've tried in that version as well, it's not working.

[coryvirok]

I just tried using the same svelte version that you're using locally and the repl appears to also exhibit the bug. So I think it's a bug in svelte version > 3.35.0 and <=3.55.1.
https://svelte.dev/repl/bb2b4e58912649bfbd5b00ed58a36969?version=3.55.1

no, it's not the same issue. and i've tried in that version as well, it's not working.

You sure? looks like it's been discussed quite a bit and this repro is almost exactly the same as yours. #6954

[Prinzhorn]

So first I though maybe I was doing something wrong

You can't use the selected prop/attribute, that's what the bind:value does for you (at least that sounds logical to me). Since this is undefined behavior (you are setting value to undefined via selectedId while also manually making one option selected) this explains why it behaves differently. Although I'm curious why exactly REPL is different than a local dev and also production build.

Anyway, if you want to "preselect" an option, make that the initial value. It also removes some of your unnecessary code.

https://svelte.dev/repl/3fb525109f1b45e6957f22a8b9feb16a?version=3.35.0

[baseballyama]

Please see version query param. This param specifies Svelte version.
And I installed Svelte 3.35.0 locally, and the result is same between REPL and local.

https://svelte.dev/repl/bb2b4e58912649bfbd5b00ed58a36969?version=3.35.0

After updating your program like this and using the latest Svelte, I think it works as expected.
(This is not related this issue, but in general, it's better to use === instead of == to check equality.)

<script>
-	let selectedId;
+	let selectedId = 2;
	let questions = [
		{ id: 1, name: "What is your name?" },
		{ id: 2, name: "What is your quest?" },
		{ id: 3, name: "What is your favorite color?" }
	];
-       const preselectedId = 2;
	function handleSelect() {
		console.log(selectedId);
	}
</script>

<select bind:value={selectedId} on:change={handleSelect}>
	<option value={null}>Please select an option...</option>

	{#each questions as question}
-               <option selected={preselectedId == question.id} value={question.id}>{question.name}</option>
+		<option selected={selectedId == question.id} value={question.id}>{question.name}</option>
	{/each}
</select>

<style>
</style>