diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 39ca782af0..73addaed13 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -858,8 +858,9 @@ export default class ElementWrapper extends Wrapper { } block.chunks.mount.push(b` - (${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value); + 'value' in ${data} && (${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value); `); + block.chunks.update.push(b` if (${block.renderer.dirty(Array.from(dependencies))} && 'value' in ${data}) (${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value); `); diff --git a/test/runtime/samples/select-multiple-spread-and-bind/_config.js b/test/runtime/samples/select-multiple-spread-and-bind/_config.js new file mode 100644 index 0000000000..78dab273a2 --- /dev/null +++ b/test/runtime/samples/select-multiple-spread-and-bind/_config.js @@ -0,0 +1,12 @@ +export default { + test({ assert, component, target }) { + const options = target.querySelectorAll('option'); + + assert.equal(options[0].selected, true); + assert.equal(options[1].selected, false); + + component.value = ['2']; + assert.equal(options[0].selected, false); + assert.equal(options[1].selected, true); + } +}; diff --git a/test/runtime/samples/select-multiple-spread-and-bind/main.svelte b/test/runtime/samples/select-multiple-spread-and-bind/main.svelte new file mode 100644 index 0000000000..45ef4d2f05 --- /dev/null +++ b/test/runtime/samples/select-multiple-spread-and-bind/main.svelte @@ -0,0 +1,8 @@ + + + + + + diff --git a/test/runtime/samples/select-multiple-spread/_config.js b/test/runtime/samples/select-multiple-spread/_config.js new file mode 100644 index 0000000000..29e76b2450 --- /dev/null +++ b/test/runtime/samples/select-multiple-spread/_config.js @@ -0,0 +1,13 @@ +export default { + test({ assert, component, target }) { + const options = target.querySelectorAll('option'); + + assert.equal(options[0].selected, true); + assert.equal(options[1].selected, false); + + // Shouldn't change the value because the value is not bound. + component.value = ['2']; + assert.equal(options[0].selected, true); + assert.equal(options[1].selected, false); + } +}; diff --git a/test/runtime/samples/select-multiple-spread/main.svelte b/test/runtime/samples/select-multiple-spread/main.svelte new file mode 100644 index 0000000000..306f6f9a24 --- /dev/null +++ b/test/runtime/samples/select-multiple-spread/main.svelte @@ -0,0 +1,7 @@ + + + + + +