Skip to content

fix: prevent selectedcontent mutation from changing the selected option#18495

Open
paoloricciuti wants to merge 2 commits into
mainfrom
selectedcontent-oninput-interfere
Open

fix: prevent selectedcontent mutation from changing the selected option#18495
paoloricciuti wants to merge 2 commits into
mainfrom
selectedcontent-oninput-interfere

Conversation

@paoloricciuti

Copy link
Copy Markdown
Member

Yesterday, I've closed #18347 because the issue was 1Password...but @Mystler actually provided a reproduction of a similar issue that could happen with selectedcontent.

Basically, in a situation like this

<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>

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

@pkg-svelte-dev

pkg-svelte-dev Bot commented Jul 2, 2026

Copy link
Copy Markdown

Install the latest version of svelte from 0bdf924:

pnpm add https://pkg.svelte.dev/svelte/c/0bdf924aeea751b3cc80d881de403169eba8604c

Open in pkg.svelte.dev: https://pkg.svelte.dev/repos/svelte/pr/18495

@changeset-bot

changeset-bot Bot commented Jul 2, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 0bdf924

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@svelte-docs-bot

Copy link
Copy Markdown

@github-actions

github-actions Bot commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Playground

pnpm add https://pkg.pr.new/svelte@18495

@Ziiyodullayevv Ziiyodullayevv left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice fix for the selectedcontent mutation issue in Svelte. The changes:

  1. The is_selectedcontent_mutation helper function is well-documented
  2. Filtering out selectedcontent mutations prevents unnecessary re-renders
  3. The changeset file follows the project conventions

The root cause analysis in the comment is excellent - explaining why these mutations could revert user-initiated changes. This is a subtle but important fix for select bindings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bind:value on a customizable <select> with a <button>/<selectedcontent> trigger resets the selection to ""

2 participants