fix: don't set selected option(s) if value is unbound or not passed (#8329)

fix: #5644

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -858,8 +858,9 @@ export default class ElementWrapper extends Wrapper {
 			}
 
 			block.chunks.mount.push(b`
-				(${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value);
+				'value' in ${data} && (${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value);
 			`);
+
 			block.chunks.update.push(b`
 				if (${block.renderer.dirty(Array.from(dependencies))} && 'value' in ${data}) (${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value);
 			`);

test/runtime/samples/select-multiple-spread-and-bind/_config.js

@@ -0,0 +1,12 @@
+export default {
+	test({ assert, component, target }) {
+		const options = target.querySelectorAll('option');
+
+		assert.equal(options[0].selected, true);
+		assert.equal(options[1].selected, false);
+
+		component.value = ['2'];
+		assert.equal(options[0].selected, false);
+		assert.equal(options[1].selected, true);
+	}
+};

test/runtime/samples/select-multiple-spread-and-bind/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Select from './select.svelte';
+
+	export let value = ['1'];
+	export let other = {};
+</script>
+
+<Select {value} {other} />

test/runtime/samples/select-multiple-spread-and-bind/select.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let value;
+	export let other;
+</script>
+
+<select multiple bind:value {...other}>
+	<option value="1">option 1</option>
+	<option value="2">option 2</option>
+</select>

test/runtime/samples/select-multiple-spread/_config.js

@@ -0,0 +1,13 @@
+export default {
+	test({ assert, component, target }) {
+		const options = target.querySelectorAll('option');
+
+		assert.equal(options[0].selected, true);
+		assert.equal(options[1].selected, false);
+
+		// Shouldn't change the value because the value is not bound.
+		component.value = ['2'];
+		assert.equal(options[0].selected, true);
+		assert.equal(options[1].selected, false);
+	}
+};

test/runtime/samples/select-multiple-spread/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Select from './select.svelte';
+
+	export let attrs = { value: ['1'] };
+</script>
+
+<Select {attrs} />

test/runtime/samples/select-multiple-spread/select.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let attrs;
+</script>
+
+<select multiple  {...attrs}>
+	<option value="1">option 1</option>
+	<option value="2">option 2</option>
+</select>