From e34f2088434423914bbc91b84a450a7f7477252b Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 22 May 2020 04:47:27 +0800
Subject: [PATCH] reselect <select> when the option values change (#4885)

---
 CHANGELOG.md                                  |  1 +
 .../render_dom/wrappers/Element/Binding.ts    |  2 +-
 .../samples/binding-select-late-2/_config.js  | 34 +++++++++++++++++++
 .../samples/binding-select-late-2/main.svelte | 12 +++++++
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/binding-select-late-2/_config.js
 create mode 100644 test/runtime/samples/binding-select-late-2/main.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2fd3d96fbe..f311416980 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Update `<select>` with `bind:value` when the available `<option>`s change ([#1764](https://github.com/sveltejs/svelte/issues/1764))
 * Fix inconsistencies when setting a two-way bound `<input>` to `undefined` ([#3569](https://github.com/sveltejs/svelte/issues/3569))
 * Fix resize listening on certain older browsers ([#4752](https://github.com/sveltejs/svelte/issues/4752))
 * Add `a11y-no-onchange` warning ([#4788](https://github.com/sveltejs/svelte/pull/4788))
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index ac5732eae7..6222eb04a4 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -87,7 +87,7 @@ export default class BindingWrapper {
 		const update_conditions: any[] = this.needs_lock ? [x`!${lock}`] : [];
 		const mount_conditions: any[] = [];
 
-		const dependency_array = [...this.node.expression.dependencies];
+		const dependency_array = Array.from(this.get_dependencies());
 
 		if (dependency_array.length > 0) {
 			update_conditions.push(block.renderer.dirty(dependency_array));
diff --git a/test/runtime/samples/binding-select-late-2/_config.js b/test/runtime/samples/binding-select-late-2/_config.js
new file mode 100644
index 0000000000..42c45d1366
--- /dev/null
+++ b/test/runtime/samples/binding-select-late-2/_config.js
@@ -0,0 +1,34 @@
+export default {
+	props: {
+		items: [],
+		selected: 'two'
+	},
+
+	html: `
+		<select></select>
+		<p>selected: two</p>
+	`,
+
+	ssrHtml: `
+		<select value="two"></select>
+		<p>selected: two</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.items = [ 'one', 'two', 'three' ];
+
+		const options = target.querySelectorAll('option');
+		assert.ok(!options[0].selected);
+		assert.ok(options[1].selected);
+		assert.ok(!options[2].selected);
+
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='one'>one</option>
+				<option value='two'>two</option>
+				<option value='three'>three</option>
+			</select>
+			<p>selected: two</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-late-2/main.svelte b/test/runtime/samples/binding-select-late-2/main.svelte
new file mode 100644
index 0000000000..52cc14528a
--- /dev/null
+++ b/test/runtime/samples/binding-select-late-2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let selected;
+	export let items;
+</script>
+
+<select bind:value={selected}>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
+
+<p>selected: {selected || 'nothing'}</p>
\ No newline at end of file