Setting the value of an input doesn't update value bindings

[Ocean-OS]

Describe the bug

If you use bind:value on an input and access the input element (either using bind:this or some other method), and then set the value of the input using the element's reference like so...

<script>
let value = $state("");
let input = $state();
</script>
Hello, {value}!<br>
<input type="text" bind:value bind:this={input} />
<button onclick={()=>input.value = ""}>Clear value</button>

The value variable doesn't stay synchronized with the input's value.

Reproduction

REPL

Logs

No response

System Info

N/A

Severity

annoyance

[leonidaz]

This is not a bug. You'd have to fire the input event afterwards, otherwise Svelte won't know that the change has been made since it has an event listener setup for input.

REPL with dispatchEvent

from the documentation: https://svelte.dev/docs/svelte/bind

Svelte creates an event listener that updates the bound value. If an element already has a listener for the same event, that listener will be fired before the bound value is updated.