Firefox form required validations and preventDefault

[cupton15]

Describe the bug
I was working with Firefox and ran into the issue with the required validation triggering as soon as the page loaded due to the input bindings, looking at this merge #3430 it would suggest the correct behaviour would be the have the bindings to be undefined to avoid this issue.

However I'm having difficulties after the form has been submitted (I'm using preventDefault to stop a page refresh) and trying to set the values back to a default value of undefined, it seems that a string with a value of "undefined" is passed to the inputs instead.

I'm not 100% sure if I'd expect the validation to show as I guess technically the form is now dirty however definitely would not expect to see undefined as the actual value.

To Reproduce
REPL: https://svelte.dev/repl/570449e737944ea888c80d6337f4b532?version=3.21.0

Steps to recreate

1. Visit REPL on Firefox
2. Note required validation has not triggered
3. Enter values into inputs + press submit
4. Text input now has word "undefined" and number input has required validation warning

Expected behavior
I think that both inputs should be empty as what happens with page load.

Information about your Svelte project:
Firefox Developer Edition - 75.0b12
Svelte 3.21.0

Severity
It's a minor annoyance but I'm sure I could find a workaround.

[Conduitry]

Is it possible in pure javascript to programmatically clear a required input but not cause the browser's required validation errors to appear?

[cupton15]

Looks like you can get the form element and then call the reset method, which as far as I can tell exhibits the behaviour I desire.

Updated REPL here https://svelte.dev/repl/570449e737944ea888c80d6337f4b532?version=3.21.0

I'll close as this resolves my issue, thanks.

[Conduitry]

For a more Svelte-y way of doing this, I'd suggest bind:this instead of document.querySelector.