Inconsistent order of bind:* and oninput across browsers

[nicolo-ribaudo]

Describe the bug

I have an input element whose value is bound to a $state, and with an oninput handler. I have an $effect to check when the value changes.

In Chrome and Safari the oninput handler runs after the $effect, while in Firefox it runs before.

Reproduction

<script>
	let value = $state("");

	$effect(() => {
		value;
		console.log("value updated!");
	});

	function onInput() {
		console.log("on input");
	}
</script>

<input type="text" oninput={onInput} bind:value>

playground

Logs

(when typing in the input)

Chrome:

value updated!
on input

Firefox:

on input
value updated!

System Info

System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M2
    Memory: 106.48 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.1.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 11.3.0 - /usr/local/bin/npm
    pnpm: 8.6.6 - /usr/local/bin/pnpm
    bun: 1.0.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 137.0.7151.104
    Chrome Canary: 139.0.7240.0
    Firefox Nightly: 141.0a1
    Safari: 18.5
    Safari Technology Preview: 18.4
  npmPackages:
    svelte: ^5.0.0 => 5.33.18

Severity

annoyance

---

I'm happy to report this to Firefox itself, if it's a Firefox bug, but:

• it'd still be great for Svelte to normalize this cross-browser difference
• for that I'd need to have a plain JS reproduction, and my knowledge of Svelte internals is too low to create it 😅

[nicolo-ribaudo]

Oh well, I reported it to Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1972233

Still, it would be very nice if Svelte ensured a consistent order :)