[fix] set selectedIndex to -1 when no option matches bound <select> v…

…alue (#6170)

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

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

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

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>