From de8094910de7e2d491c2f26b891844c2f311f78f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gautier=20Ben=20A=C3=AFm?=
 <48261497+GauBen@users.noreply.github.com>
Date: Tue, 20 May 2025 19:32:47 +0200
Subject: [PATCH] fix(14815): warn when an invalid <select multiple> value is
 given (#14816)

* fix(14815): warn when an invalid <select multiple> value is given

* Create nervous-stingrays-travel.md
---
 .changeset/nervous-stingrays-travel.md        |  5 +++++
 .../.generated/client-warnings.md             | 13 +++++++++++++
 .../messages/client-warnings/warnings.md      | 11 +++++++++++
 .../client/dom/elements/bindings/select.js    | 19 +++++++++++++++----
 .../svelte/src/internal/client/warnings.js    | 11 +++++++++++
 .../select-multiple-invalid-value/_config.js  |  7 +++++++
 .../select-multiple-invalid-value/main.svelte |  9 +++++++++
 7 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/nervous-stingrays-travel.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte

diff --git a/.changeset/nervous-stingrays-travel.md b/.changeset/nervous-stingrays-travel.md
new file mode 100644
index 0000000000..9ccc3e6c65
--- /dev/null
+++ b/.changeset/nervous-stingrays-travel.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+Warn when an invalid `<select multiple>` value is given
diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index 77d1df4cdd..fe90b0db38 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -200,6 +200,19 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
+### select_multiple_invalid_value
+
+```
+The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+```
+
+When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
+
+To silence the warning, ensure that `value`:
+
+- is an array for an explicit selection
+- is `null` or `undefined` to keep the selection as is
+
 ### state_proxy_equality_mismatch
 
 ```
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index f8e9ebd8a0..f1901271d1 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -168,6 +168,17 @@ Consider the following code:
 
 To fix it, either create callback props to communicate changes, or mark `person` as [`$bindable`]($bindable).
 
+## select_multiple_invalid_value
+
+> The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+
+When using `<select multiple value={...}>`, Svelte will mark all selected `<option>` elements as selected by iterating over the array passed to `value`. If `value` is not an array, Svelte will emit this warning and keep the selected options as they are.
+
+To silence the warning, ensure that `value`:
+
+- is an array for an explicit selection
+- is `null` or `undefined` to keep the selection as is
+
 ## state_proxy_equality_mismatch
 
 > Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/select.js b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
index 32cd160de2..20f95af5ec 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -2,6 +2,8 @@ import { effect } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
 import { untrack } from '../../../runtime.js';
 import { is } from '../../../proxy.js';
+import { is_array } from '../../../../shared/utils.js';
+import * as w from '../../../warnings.js';
 
 /**
  * Selects the correct option(s) (depending on whether this is a multiple select)
@@ -12,6 +14,17 @@ import { is } from '../../../proxy.js';
  */
 export function select_option(select, value, mounting) {
 	if (select.multiple) {
+		// If value is null or undefined, keep the selection as is
+		if (value == undefined) {
+			return;
+		}
+
+		// If not an array, warn and keep the selection as is
+		if (!is_array(value)) {
+			return w.select_multiple_invalid_value();
+		}
+
+		// Otherwise, update the selection
 		return select_options(select, value);
 	}
 
@@ -124,14 +137,12 @@ export function bind_select_value(select, get, set = get) {
 }
 
 /**
- * @template V
  * @param {HTMLSelectElement} select
- * @param {V} value
+ * @param {unknown[]} value
  */
 function select_options(select, value) {
 	for (var option of select.options) {
-		// @ts-ignore
-		option.selected = ~value.indexOf(get_option_value(option));
+		option.selected = value.includes(get_option_value(option));
 	}
 }
 
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index c84b487e28..e07892a4b0 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -158,6 +158,17 @@ export function ownership_invalid_mutation(name, location, prop, parent) {
 	}
 }
 
+/**
+ * The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.
+ */
+export function select_multiple_invalid_value() {
+	if (DEV) {
+		console.warn(`%c[svelte] select_multiple_invalid_value\n%cThe \`value\` property of a \`<select multiple>\` element should be an array, but it received a non-array value. The selection will be kept as is.\nhttps://svelte.dev/e/select_multiple_invalid_value`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/select_multiple_invalid_value`);
+	}
+}
+
 /**
  * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
  * @param {string} operator
diff --git a/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js
new file mode 100644
index 0000000000..1f04f176af
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: [
+		'The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.'
+	]
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte
new file mode 100644
index 0000000000..f3dfedf0e9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-multiple-invalid-value/main.svelte
@@ -0,0 +1,9 @@
+<select multiple value={null}>
+  <option>option</option>
+</select>
+<select multiple value={undefined}>
+  <option>option</option>
+</select>
+<select multiple value={123}>
+  <option>option</option>
+</select>