svelte: Resetting html form doesn't trigger input bindings

FWIW Vue doesn’t trigger the binding update with v-model too (Example). I think it’s fine that Svelte doesn’t support this either, as it preserves the easier mental model of “on input events” only (anything external is out of reach).

I did made a REPL with a fixFormReset action that can be used on an input to emulate the input event on form reset. Another way is to invert this logic, to be able to use the action on a form instead.

Chiming in with my use case:

I was writing a Markdown editor, very much like GitHub’s comment box that I’m typing this in right now, where the user could preview their rendered Markdown. This component is very simple, with a textarea whose value is bound to a variable that is fed into SvelteMarkdown when the user clicks on the preview button. Of course I used <form use:enhance> to get a progressively enhanced form that works without JS. The problem is that after I submit the form, the textarea gets cleared, but the bound value does not, meaning that the rendered Markdown is still visible in the preview tab.

I worked around this by setting a listener on the reset event for the textarea’s parent form that reset the bound value like: textarea.form.onreset = () => (value = ''). Wasn’t the ugliest thing ever but…would have been nice to not have to do that.

Also got bit by this. I’m having to explicitly set the bound variables to nothing to reset the form. I have a form that’s conditionally shown, and I’m guessing that even though the form is reset before hiding, when it’s re-shown the form values are populated from the bound variables…

I don’t think this should be closed, even though it’s understandably not a priority.

No