From 2bace308e37ac1def958be750bd699ed302bb715 Mon Sep 17 00:00:00 2001
From: Floze <88098863+floze-the-genius@users.noreply.github.com>
Date: Wed, 22 Jul 2026 16:17:27 +0400
Subject: [PATCH] fix: preserve select selection with spread attributes
 (#18561)

Fixes #18557

A `<select>` with spread attributes initializes the option mutation
observer even when those attributes never provide a `value`. In that
case the element has no internal `__value`, but the observer previously
treated the missing property as an explicit `undefined` value and
deselected every option after an option was added or removed.

Only reapply the programmatic selection when `__value` is actually
present. This preserves the browser's current selection for spreads
without a value while keeping the existing behavior for bindings,
including an explicitly stored `undefined` value.

A runtime-legacy regression fixture covers both adding and removing an
option in client and hydration modes.

### Before submitting

- [x] References the existing issue
- [x] Uses a `fix:` title
- [x] Includes a regression test
- [x] Includes a patch changeset for `svelte`

### Test plan

- [x] `FILTER=select-spread-preserve-selection pnpm test runtime-legacy
--maxWorkers=1` (2 tests passed: client and hydrate)
- [x] `git diff --check`
- [ ] Full `pnpm test` was not run because the shared host was under
resource pressure and broad test processes were explicitly avoided
- [ ] `pnpm lint` and `pnpm check` were not run for the same reason
- [ ] Targeted repository Prettier check was attempted, but could not
start because `prettier-plugin-svelte` required the ungenerated
`packages/svelte/compiler/index.js`; no broad build or dependency
reinstall was run

### AI disclosure

AI-assisted: the implementation, regression test, and pull request text
were prepared with OpenAI Codex and reviewed by the contributor.

Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>
---
 .changeset/tidy-select-spreads.md             |  5 ++++
 .../client/dom/elements/bindings/select.js    |  6 +++--
 .../_config.js                                | 25 +++++++++++++++++++
 .../main.svelte                               | 16 ++++++++++++
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tidy-select-spreads.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/select-spread-preserve-selection/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/select-spread-preserve-selection/main.svelte

diff --git a/.changeset/tidy-select-spreads.md b/.changeset/tidy-select-spreads.md
new file mode 100644
index 0000000000..3b14dc5d34
--- /dev/null
+++ b/.changeset/tidy-select-spreads.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: preserve select selection when spread attributes omit value
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 eb26062653..e390e23ea0 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -56,8 +56,10 @@ export function select_option(select, value, mounting = false) {
  */
 export function init_select(select) {
 	var observer = new MutationObserver(() => {
-		// @ts-ignore
-		select_option(select, select.__value);
+		if ('__value' in select) {
+			// @ts-ignore
+			select_option(select, select.__value);
+		}
 		// Deliberately don't update the potential binding value,
 		// the model should be preserved unless explicitly changed
 	});
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-spread-preserve-selection/_config.js b/packages/svelte/tests/runtime-legacy/samples/select-spread-preserve-selection/_config.js
new file mode 100644
index 0000000000..8bc2f11e26
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/select-spread-preserve-selection/_config.js
@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	mode: ['client', 'hydrate'],
+
+	async test({ assert, component, target }) {
+		const select = target.querySelector('select');
+		ok(select);
+
+		assert.equal(select.selectedIndex, 0);
+
+		component.toggle();
+		flushSync();
+		await Promise.resolve();
+
+		assert.equal(select.selectedIndex, 0);
+
+		component.toggle();
+		flushSync();
+		await Promise.resolve();
+
+		assert.equal(select.selectedIndex, 0);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/select-spread-preserve-selection/main.svelte b/packages/svelte/tests/runtime-legacy/samples/select-spread-preserve-selection/main.svelte
new file mode 100644
index 0000000000..229ce4fb73
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/select-spread-preserve-selection/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let show_extra = false;
+	const attributes = { 'aria-label': 'choice' };
+
+	export function toggle() {
+		show_extra = !show_extra;
+	}
+</script>
+
+<select {...attributes}>
+	<option value="">Choose an option</option>
+	<option value="first">First</option>
+	{#if show_extra}
+		<option value="extra">Extra</option>
+	{/if}
+</select>