reselect <select> when the option values change (sveltejs#4885)

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))

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));

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>
+		`);
+	}
+};

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>