From ee470d5dc9f3d5a814875f8c7f272a31eb97effa Mon Sep 17 00:00:00 2001
From: Shinobu Hayashi <PhilisPaxil@gmail.com>
Date: Sat, 28 Aug 2021 03:53:18 +0900
Subject: [PATCH] [fix] handle undefined select value with spread (#6687)

---
 .../compile/render_dom/wrappers/Element/index.ts     |  2 +-
 .../Select.svelte                                    | 12 ++++++++++++
 .../spread-element-select-value-undefined/_config.js | 11 +++++++++++
 .../main.svelte                                      | 11 +++++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/spread-element-select-value-undefined/Select.svelte
 create mode 100644 test/runtime/samples/spread-element-select-value-undefined/_config.js
 create mode 100644 test/runtime/samples/spread-element-select-value-undefined/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index 52e099b42f..9ec36b12d7 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -674,7 +674,7 @@ export default class ElementWrapper extends Wrapper {
 				(${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value);
 			`);
 			block.chunks.update.push(b`
-				if (${block.renderer.dirty(Array.from(dependencies))}) (${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value);;
+				if (${block.renderer.dirty(Array.from(dependencies))} && 'value' in ${data}) (${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value);;
 			`);
 		} else if (this.node.name === 'input' && this.attributes.find(attr => attr.node.name === 'value')) {
 			const type = this.node.get_static_attribute_value('type');
diff --git a/test/runtime/samples/spread-element-select-value-undefined/Select.svelte b/test/runtime/samples/spread-element-select-value-undefined/Select.svelte
new file mode 100644
index 0000000000..6f5dadf001
--- /dev/null
+++ b/test/runtime/samples/spread-element-select-value-undefined/Select.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let options = [];
+	export let value = "";
+	export let label = "";
+</script>
+
+<select bind:value {...$$restProps}>
+	{#each options as option}
+		<option>{option}</option>
+	{/each}
+</select>
+<p>{label}</p>
diff --git a/test/runtime/samples/spread-element-select-value-undefined/_config.js b/test/runtime/samples/spread-element-select-value-undefined/_config.js
new file mode 100644
index 0000000000..59cf59d662
--- /dev/null
+++ b/test/runtime/samples/spread-element-select-value-undefined/_config.js
@@ -0,0 +1,11 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+
+		assert.equal(select.value, '1');
+
+		component.label = 'hoge';
+
+		assert.equal(select.value, '1');
+	}
+};
diff --git a/test/runtime/samples/spread-element-select-value-undefined/main.svelte b/test/runtime/samples/spread-element-select-value-undefined/main.svelte
new file mode 100644
index 0000000000..57a2e3cf3e
--- /dev/null
+++ b/test/runtime/samples/spread-element-select-value-undefined/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Select from "./Select.svelte";
+	let value = {
+		a: "1",
+		b: "1",
+	};
+	const options = ["1", "2", "3"];
+	export let label = "test";
+</script>
+
+<Select bind:value={value.a} {options} label={label} />