From 6352e1e3e28229612ace7c4ef3d2784bc214cc2a Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Thu, 2 Jul 2026 13:25:59 +0200
Subject: [PATCH] fix: prevent `selectedcontent` mutation from changing the
 selected option

---
 .changeset/tidy-pandas-refuse.md              |  5 ++++
 .../client/dom/elements/bindings/select.js    | 27 ++++++++++++++++++-
 .../_config.js                                | 22 +++++++++++++++
 .../main.svelte                               | 17 ++++++++++++
 4 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tidy-pandas-refuse.md
 create mode 100644 packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/main.svelte

diff --git a/.changeset/tidy-pandas-refuse.md b/.changeset/tidy-pandas-refuse.md
new file mode 100644
index 000000000000..7034a3e26763
--- /dev/null
+++ b/.changeset/tidy-pandas-refuse.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent `selectedcontent` mutation from changing the selected option
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 eb26062653cc..0dd6aa0f19dc 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js
@@ -55,7 +55,13 @@ export function select_option(select, value, mounting = false) {
  * @param {HTMLSelectElement} select
  */
 export function init_select(select) {
-	var observer = new MutationObserver(() => {
+	var observer = new MutationObserver((entries) => {
+		// Mutations related to `<selectedcontent>` can never affect the option list.
+		// Reacting to them could revert a user-initiated selection change, because the
+		// records are delivered as soon as any listener returns (e.g. a delegated `input`
+		// handler), which can happen before the `change` handler has updated `__value`
+		if (entries.every(is_selectedcontent_mutation)) return;
+
 		// @ts-ignore
 		select_option(select, select.__value);
 		// Deliberately don't update the potential binding value,
@@ -162,3 +168,22 @@ function get_option_value(option) {
 		return option.value;
 	}
 }
+
+/**
+ * Returns `true` if the mutation stems from the browser mirroring the selected
+ * option's content into `<selectedcontent>`, or from us replacing the
+ * `<selectedcontent>` element with a clone of itself
+ * @param {MutationRecord} entry
+ */
+function is_selectedcontent_mutation(entry) {
+	if (/** @type {Element} */ (entry.target).closest('selectedcontent') !== null) {
+		return true;
+	}
+
+	if (entry.type === 'childList') {
+		var nodes = [...entry.addedNodes, ...entry.removedNodes];
+		return nodes.length > 0 && nodes.every((node) => node.nodeName === 'SELECTEDCONTENT');
+	}
+
+	return false;
+}
diff --git a/packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/_config.js b/packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/_config.js
new file mode 100644
index 000000000000..d153eceeb7e0
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../assert';
+
+export default test({
+	async test({ target, assert }) {
+		const select = target.querySelector('select');
+		ok(select);
+
+		select.value = 'B';
+		select.dispatchEvent(new Event('input', { bubbles: true }));
+
+		// because another element has a delegated `oninput` handler, a global `input`
+		// listener runs and, once it returns, a microtask checkpoint delivers the
+		// mutation records *before* the `change` event — we emulate that checkpoint here
+		await Promise.resolve();
+
+		select.dispatchEvent(new Event('change', { bubbles: true }));
+		flushSync();
+
+		assert.equal(select.value, 'B');
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/main.svelte b/packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/main.svelte
new file mode 100644
index 000000000000..97634042ff76
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/main.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	let value = $state('A');
+</script>
+
+<input oninput={() => {}} />
+<select bind:value>
+	<button><selectedcontent></selectedcontent></button>
+	<option>A</option>
+	<option>B</option>
+	<option>C</option>
+</select>
+
+<style>
+	select,::picker(select){
+		appearance: base-select;
+	}
+</style>
\ No newline at end of file