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: ` +

selected: null

+ + + +

selected: null

+ `, + + 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, ` +

selected: a

+ + + +

selected: a

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

selected: d

+ + + +

selected: d

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

selected: {selected}

+ + + +

selected: {selected}

\ No newline at end of file