From 60a205edb8ac8ee6022eae968b5f53893445b137 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Mon, 27 Feb 2023 21:00:35 +0900
Subject: [PATCH] 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>
---
 .../compile/render_dom/wrappers/Element/index.ts    |  3 ++-
 .../select-multiple-spread-and-bind/_config.js      | 12 ++++++++++++
 .../select-multiple-spread-and-bind/main.svelte     |  8 ++++++++
 .../select-multiple-spread-and-bind/select.svelte   |  9 +++++++++
 .../samples/select-multiple-spread/_config.js       | 13 +++++++++++++
 .../samples/select-multiple-spread/main.svelte      |  7 +++++++
 .../samples/select-multiple-spread/select.svelte    |  8 ++++++++
 7 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/select-multiple-spread-and-bind/_config.js
 create mode 100644 test/runtime/samples/select-multiple-spread-and-bind/main.svelte
 create mode 100644 test/runtime/samples/select-multiple-spread-and-bind/select.svelte
 create mode 100644 test/runtime/samples/select-multiple-spread/_config.js
 create mode 100644 test/runtime/samples/select-multiple-spread/main.svelte
 create mode 100644 test/runtime/samples/select-multiple-spread/select.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 39ca782af0..73addaed13 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/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);
 			`);
diff --git a/test/runtime/samples/select-multiple-spread-and-bind/_config.js b/test/runtime/samples/select-multiple-spread-and-bind/_config.js
new file mode 100644
index 0000000000..78dab273a2
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/test/runtime/samples/select-multiple-spread-and-bind/main.svelte b/test/runtime/samples/select-multiple-spread-and-bind/main.svelte
new file mode 100644
index 0000000000..45ef4d2f05
--- /dev/null
+++ b/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} />
diff --git a/test/runtime/samples/select-multiple-spread-and-bind/select.svelte b/test/runtime/samples/select-multiple-spread-and-bind/select.svelte
new file mode 100644
index 0000000000..ecfc754cb9
--- /dev/null
+++ b/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>
diff --git a/test/runtime/samples/select-multiple-spread/_config.js b/test/runtime/samples/select-multiple-spread/_config.js
new file mode 100644
index 0000000000..29e76b2450
--- /dev/null
+++ b/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);
+	}
+};
diff --git a/test/runtime/samples/select-multiple-spread/main.svelte b/test/runtime/samples/select-multiple-spread/main.svelte
new file mode 100644
index 0000000000..306f6f9a24
--- /dev/null
+++ b/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} />
diff --git a/test/runtime/samples/select-multiple-spread/select.svelte b/test/runtime/samples/select-multiple-spread/select.svelte
new file mode 100644
index 0000000000..d37667a8de
--- /dev/null
+++ b/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>