From 63ff1e4181708fcbdc2efb2e3354084fce4c719d Mon Sep 17 00:00:00 2001
From: ddoemonn <ozergokalpsezer@gmail.com>
Date: Fri, 12 Jun 2026 20:24:30 +0300
Subject: [PATCH] fix: preserve nullish option values when using spread
 attributes on `<option>`

---
 .changeset/select-option-spread-undefined.md  |  5 ++
 .../client/dom/elements/attributes.js         |  4 +-
 .../SelectOptionWithSpread.svelte             |  9 ++++
 .../SelectOptionWithoutSpread.svelte          |  9 ++++
 .../select-option-spread-bind/_config.js      | 49 +++++++++++++++++++
 .../select-option-spread-bind/main.svelte     | 23 +++++++++
 6 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/select-option-spread-undefined.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/SelectOptionWithSpread.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/SelectOptionWithoutSpread.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/main.svelte

diff --git a/.changeset/select-option-spread-undefined.md b/.changeset/select-option-spread-undefined.md
new file mode 100644
index 0000000000..3ac1b49362
--- /dev/null
+++ b/.changeset/select-option-spread-undefined.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: preserve nullish option values when using spread attributes on `<option>`
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 589685b5f2..91d02a50e0 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -360,7 +360,9 @@ function set_attributes(
 			// a very rare edge case, and removing the attribute altogether isn't possible either
 			// for the <option value={undefined}> case, so we're not losing any functionality here.
 			// @ts-ignore
-			element.value = element.__value = '';
+			element.value = '';
+			// @ts-ignore
+			element.__value = value;
 			current[key] = value;
 			continue;
 		}
diff --git a/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/SelectOptionWithSpread.svelte b/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/SelectOptionWithSpread.svelte
new file mode 100644
index 0000000000..fc3263e259
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/SelectOptionWithSpread.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { value = $bindable(), options } = $props();
+</script>
+
+<select bind:value>
+	{#each options as { value, label, ...restprops }}
+		<option {value} {...restprops}>{label}</option>
+	{/each}
+</select>
diff --git a/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/SelectOptionWithoutSpread.svelte b/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/SelectOptionWithoutSpread.svelte
new file mode 100644
index 0000000000..80b37f54d0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/SelectOptionWithoutSpread.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { value = $bindable(), options } = $props();
+</script>
+
+<select bind:value>
+	{#each options as { value, label }}
+		<option {value}>{label}</option>
+	{/each}
+</select>
diff --git a/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/_config.js b/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/_config.js
new file mode 100644
index 0000000000..28b5168abb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/_config.js
@@ -0,0 +1,49 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	async test({ assert, target, component }) {
+		const [select0, select1] = target.querySelectorAll('select');
+		ok(select0);
+		ok(select1);
+
+		/**
+		 * @param {HTMLOptionElement} option
+		 */
+		function get_option_value(option) {
+			if ('__value' in option) {
+				// @ts-ignore
+				return option.__value;
+			}
+
+			return option.value;
+		}
+
+		/**
+		 * @param {HTMLSelectElement} select
+		 * @param {number} index
+		 */
+		function select_at(select, index) {
+			select.selectedIndex = index;
+			select.dispatchEvent(new Event('change', { bubbles: true }));
+			flushSync();
+		}
+
+		for (let i = 0; i < select0.options.length; i += 1) {
+			assert.deepEqual(
+				get_option_value(select1.options[i]),
+				get_option_value(select0.options[i]),
+				`option __value should match at index ${i}`
+			);
+		}
+
+		// nullish values all serialize to '' in the DOM, so select a distinct option first
+		select_at(select0, 6);
+		select_at(select1, 6);
+		select_at(select0, 0);
+		select_at(select1, 0);
+
+		assert.equal(component.value0, undefined);
+		assert.equal(component.value1, undefined);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/main.svelte b/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/main.svelte
new file mode 100644
index 0000000000..dada301fc4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/select-option-spread-bind/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import SelectOptionWithoutSpread from './SelectOptionWithoutSpread.svelte';
+	import SelectOptionWithSpread from './SelectOptionWithSpread.svelte';
+
+	let value0 = $state();
+	let value1 = $state();
+
+	const options = [
+		{ value: undefined, label: 'undefined' },
+		{ value: null, label: 'null' },
+		{ value: '', label: '""' },
+		{ value: false, label: 'false' },
+		{ value: true, label: 'true' },
+		{ value: 0, label: '0' },
+		{ value: 1, label: '1' },
+		{ value: '0', label: '"0"' },
+		{ value: '1', label: '"1"' },
+		{ value: { prop: 1 }, label: '{ prop: 1 }' }
+	];
+</script>
+
+<SelectOptionWithoutSpread bind:value={value0} {options} />
+<SelectOptionWithSpread bind:value={value1} {options} />