Merge fb119fe59d into 435da13fdd

.changeset/fix-select-multiple-dynamic.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: handle dynamic multiple attribute on select

packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js

@@ -81,17 +81,7 @@ export function BindDirective(node, context) {
 			}
 
 			if (parent.name === 'select' && node.name !== 'this') {
-				const multiple = parent.attributes.find(
+				// We used to forbid dynamic multiple, but we now support it
-					(a) =>
-						a.type === 'Attribute' &&
-						a.name === 'multiple' &&
-						!is_text_attribute(a) &&
-						a.value !== true
-				);
-
-				if (multiple) {
-					e.attribute_invalid_multiple(multiple);
-				}
 			}
 
 			if (node.name === 'offsetWidth' && is_svg(parent.name)) {

packages/svelte/src/internal/client/dom/elements/bindings/select.js

@@ -69,7 +69,7 @@ export function init_select(select) {
 		// (doesn't get notified of select value changes,
 		// because that property is not reflected as an attribute)
 		attributes: true,
-		attributeFilter: ['value']
+		attributeFilter: ['value', 'multiple']
 	});
 
 	teardown(() => {

packages/svelte/tests/runtime-runes/samples/select-multiple-dynamic-attribute/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	let multiple = $state(false);
+	let value = $state(['b']);
+</script>
+
+<select {multiple} bind:value>
+	<option value="a">a</option>
+	<option value="b">b</option>
+	<option value="c">c</option>
+</select>
+
+<button onclick={() => multiple = !multiple}>toggle</button>

packages/svelte/tests/runtime-runes/samples/select-multiple-dynamic-attribute/test.ts

@@ -0,0 +1,26 @@
+export async function test({ assert, target, logs }: { assert: any; target: any; logs: any }) {
+	const select = target.querySelector('select');
+	const options = target.querySelectorAll('option');
+	const [btn] = target.querySelectorAll('button');
+
+	assert.equal(select.multiple, false);
+	assert.equal(options[0].selected, false);
+	assert.equal(options[1].selected, true);
+	assert.equal(options[2].selected, false);
+
+	btn.click();
+	await Promise.resolve();
+
+	assert.equal(select.multiple, true);
+	assert.equal(options[0].selected, false);
+	assert.equal(options[1].selected, true);
+	assert.equal(options[2].selected, false);
+
+	btn.click();
+	await Promise.resolve();
+
+	assert.equal(select.multiple, false);
+	assert.equal(options[0].selected, false);
+	assert.equal(options[1].selected, true);
+	assert.equal(options[2].selected, false);
+}

packages/svelte/tests/validator/samples/binding-select-multiple-dynamic/errors.json

@@ -1,14 +0,0 @@
-[
-	{
-		"code": "attribute_invalid_multiple",
-		"message": "'multiple' attribute must be static if select uses two-way binding",
-		"start": {
-			"line": 14,
-			"column": 19
-		},
-		"end": {
-			"line": 14,
-			"column": 29
-		}
-	}
-]

packages/svelte/tests/validator/samples/binding-select-multiple-dynamic/input.svelte

@@ -1,18 +0,0 @@
-<script>
-	let value;
-	let multiple;
-</script>
-
-<!-- ok -->
-<select bind:this={value} {multiple}>
-	<option>1</option>
-	<option>2</option>
-	<option>3</option>
-</select>
-
-<!-- error -->
-<select bind:value {multiple}>
-	<option>1</option>
-	<option>2</option>
-	<option>3</option>
-</select>