From 06c9b7929a1cb5294e7f00faa3d24b7a65556a58 Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Fri, 21 Aug 2026 14:16:19 +0200 Subject: [PATCH] fix: prevent `selectedcontent` mutation from changing the selected option (#18495) Basically, in a situation like this ```svelte {}} /> ``` what happens is that the `oninput` is delegated and so it registers the global listener (which means it listen on every `oninput` not just the one from the input). When the select change, the `input` event is dispatched first, the listener runs, doesn't find an `__input` handler and returns. Now before the `change` event is emitted, the `MutationObserver` in `init_select` is triggered by the browser updating `selectedcontent` and invokes `select_option` with `select.__value`. However, since the `change` event has yet to fire, `select.__value` still has the old value, so we "reselect" that. When the change event runs, the selected option is effectively the old one and the whole thing breaks. I had to add the test in `runtime-browser` because JSDom doesn't support `selectedcontent` --- .changeset/tidy-pandas-refuse.md | 5 +++ .../client/dom/elements/bindings/select.js | 32 ++++++++++++++++--- .../_config.js | 22 +++++++++++++ .../main.svelte | 17 ++++++++++ 4 files changed, 71 insertions(+), 5 deletions(-) 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 0000000000..7034a3e267 --- /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 e390e23ea0..a408613104 100644 --- a/packages/svelte/src/internal/client/dom/elements/bindings/select.js +++ b/packages/svelte/src/internal/client/dom/elements/bindings/select.js @@ -55,11 +55,14 @@ export function select_option(select, value, mounting = false) { * @param {HTMLSelectElement} select */ export function init_select(select) { - var observer = new MutationObserver(() => { - if ('__value' in select) { - // @ts-ignore - select_option(select, select.__value); - } + var observer = new MutationObserver((entries) => { + // Mutations related to `` 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) || !('__value' in select)) return; + // @ts-ignore + select_option(select, select.__value); // Deliberately don't update the potential binding value, // the model should be preserved unless explicitly changed }); @@ -164,3 +167,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 ``, or from us replacing the + * `` 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 0000000000..d153eceeb7 --- /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 0000000000..97634042ff --- /dev/null +++ b/packages/svelte/tests/runtime-browser/samples/selectedcontent-oninput-interfere/main.svelte @@ -0,0 +1,17 @@ + + + {}} /> + + + \ No newline at end of file