Modifying bound state in oninput handler no longer works in Firefox

[theodorejb]

Describe the bug

I recently tried updating our app to the latest version of Svelte, and noticed that our formatted inputs no longer work for Firefox users.

The inputs work as expected through Svelte 5.35.7, but starting in Svelte 5.36.0 what is displayed in the input no longer matches the bound Svelte state.

Are we doing something wrong here? If there isn't a simple workaround this blocks us from upgrading Svelte.

Reproduction

https://svelte.dev/playground/bf28bf223e4746a199f15ca80385487d?version=5.38.0

Last version that worked: https://svelte.dev/playground/bf28bf223e4746a199f15ca80385487d?version=5.35.7

Logs

System Info

Windows 11, Firefox 141

Severity

blocking an upgrade

[theodorejb]

Starting in Svelte 5.38.5, the behavior of my reproduction changed again in Firefox. Now when the oninput handler runs, the input is updated to match the bound state. However, the curser in the input doesn't stay at the end, but moves behind the last character.

For example, if I type "1234" in the input, the input and state are updated as expected to "123-4", but the curser moves behind the 4, rather than staying at the end as it does in other browsers. So as users continue to type the phone number, it ends up in a different order than what they typed. Entering "1234567890" results in the input and bound state showing "123-567890-4".

This is an even worse regression for Firefox users than before when the input wasn't updated, but at least the bound state was correct. https://svelte.dev/playground/bf28bf223e4746a199f15ca80385487d?version=5.38.8

@dummdidumm Is there anyone on the Svelte team who can look into this? This issue prevents us from upgrading past Svelte 5.35.7.

[theodorejb]

It seems that the simplest workaround is to remove the two-way binding, and instead get the current value from the event target:

<input
  id="phone"
  value={phone}
  oninput={(e) => (phone = formatPhone(e.currentTarget.value))}
  type="tel"
/>

This works as expected in Firefox as well as other browsers.

[dummdidumm]

What's the reason for using bind:value when you're also using oninput to change the value? Why not just value as you just mentioned?

[theodorejb]

@dummdidumm It probably is better to just use value and get the current value from the event target.

Using bind:value did work fine in all browsers prior to Svelte 5.36.0, so this seemed like an unintentional BC break in that release. If the two-way binding approach isn't supported, perhaps there should be a warning for it (or at least documentation guidance), so it doesn't only appear to work when testing in most browsers, but then fail in Firefox.

[theodorejb]

A coworker suggested using function bindings as a more idiomatic way to transform the value:

<input
  id="phone"
  bind:value={
    () => phone,
    (v) => phone = formatPhone(v)
  }
  type="tel"
/>

However, this has the same issue where the cursor doesn't stay at the end, and moves behind the added character when formatting the value. Strangely, this occurs in other browsers too and not only Firefox (I also tested in Microsoft Edge):

https://svelte.dev/playground/b98b2a2460d342868078ba62ffa13df2?version=5.39.11

Is this a bug, or expected behavior? It makes function bindings rather useless for formatting a value as the user types.

[dummdidumm]

bind:value has a best-effort restoring of selection built-in but it doesn't properly work in this case; we can fix that.