WIP

Author: jasonlyu123

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -671,7 +671,11 @@ export default class ElementWrapper extends Wrapper {
 		// handle edge cases for elements
 		if (this.node.name === 'select') {
 			const dependencies = new Set<string>();
-			for (const attr of this.attributes) {
+			const value_or_spread = this.attributes.filter(attr =>
+				attr.node.type === 'Spread' || attr.node.name === 'value'
+			);
+
+			for (const attr of value_or_spread) {
 				for (const dep of attr.node.dependencies) {
 					dependencies.add(dep);
 				}

test/runtime/samples/spread-element-select-multiple-with-other-attr/_config.js

@@ -0,0 +1,25 @@
+export default {
+	solo: true,
+	async test({ assert, component, target }) {
+		const select = target.querySelector('select');
+		const [option1, option2] = select.childNodes;
+
+		let selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 2);
+		assert.ok(selections.includes(option1));
+		assert.ok(selections.includes(option2));
+
+		component.required = true;
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 2, 'required');
+		assert.ok(selections.includes(option1));
+		assert.ok(selections.includes(option2));
+		assert.ok(select.required);
+
+		component.spread = { id: 'id' };
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 2, 'spread');
+		assert.ok(selections.includes(option1));
+		assert.ok(selections.includes(option2));
+	}
+};

test/runtime/samples/spread-element-select-multiple-with-other-attr/main.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let value = ['Hello', 'World'];
+	export let spread = {};
+	export let required;
+</script>
+
+<select multiple {required} {value} {...spread}>
+  <option>Hello</option>
+  <option>World</option>
+</select>