From 8cb72d9716d0139ee1fa76e84e66a569e1f461c9 Mon Sep 17 00:00:00 2001
From: Theodore Brown <theodorejb@outlook.com>
Date: Fri, 20 Aug 2021 10:24:49 -0600
Subject: [PATCH] [fix] set selectedIndex to -1 when no option matches bound
 <select> value (#6170)

---
 src/runtime/internal/dom.ts                   |  2 +
 .../_config.js                                |  1 +
 .../binding-select-unmatched/_config.js       | 60 +++++++++++++++++++
 .../binding-select-unmatched/main.svelte      | 14 +++++
 4 files changed, 77 insertions(+)
 create mode 100644 test/runtime/samples/binding-select-unmatched/_config.js
 create mode 100644 test/runtime/samples/binding-select-unmatched/main.svelte

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 88df1eebc1..98adc99b59 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -542,6 +542,8 @@ export function select_option(select, value) {
 			return;
 		}
 	}
+
+	select.selectedIndex = -1; // no option should be selected
 }
 
 export function select_options(select, value) {
diff --git a/test/runtime/samples/binding-select-initial-value-undefined/_config.js b/test/runtime/samples/binding-select-initial-value-undefined/_config.js
index 821a8a3c64..27bac7ef77 100644
--- a/test/runtime/samples/binding-select-initial-value-undefined/_config.js
+++ b/test/runtime/samples/binding-select-initial-value-undefined/_config.js
@@ -14,6 +14,7 @@ export default {
 	`,
 
 	test({ assert, component, target }) {
+		assert.equal(component.selected, 'a');
 		const select = target.querySelector('select');
 		const options = [...target.querySelectorAll('option')];
 
diff --git a/test/runtime/samples/binding-select-unmatched/_config.js b/test/runtime/samples/binding-select-unmatched/_config.js
new file mode 100644
index 0000000000..99e7d23927
--- /dev/null
+++ b/test/runtime/samples/binding-select-unmatched/_config.js
@@ -0,0 +1,60 @@
+export default {
+	html: `
+		<p>selected: null</p>
+
+		<select>
+			<option value='a'>a</option>
+			<option value='b'>b</option>
+			<option value='c'>c</option>
+		</select>
+
+		<p>selected: null</p>
+	`,
+
+	async test({ assert, component, target }) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		assert.equal(component.selected, null);
+
+		// no option should be selected since none of the options matches the bound value
+		assert.equal(select.value, '');
+		assert.equal(select.selectedIndex, -1);
+		assert.ok(!options[0].selected);
+
+		component.selected = 'a'; // first option should now be selected
+		assert.equal(select.value, 'a');
+		assert.ok(options[0].selected);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>selected: a</p>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+
+			<p>selected: a</p>
+		`);
+
+		component.selected = 'd'; // doesn't match an option
+
+		// now no option should be selected again
+		assert.equal(select.value, '');
+		assert.equal(select.selectedIndex, -1);
+		assert.ok(!options[0].selected);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>selected: d</p>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+
+			<p>selected: d</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-unmatched/main.svelte b/test/runtime/samples/binding-select-unmatched/main.svelte
new file mode 100644
index 0000000000..20e13f4765
--- /dev/null
+++ b/test/runtime/samples/binding-select-unmatched/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	// set as null so no option will be selected by default
+	export let selected = null;
+</script>
+
+<p>selected: {selected}</p>
+
+<select bind:value={selected}>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
+</select>
+
+<p>selected: {selected}</p>
\ No newline at end of file