No way to attach preventDefault modifier to Form component.

[jaeming]

When using the Form component, hitting enter will trigger an on:submit but since there is no way to attach a |preventDefault to the event, it will cause a reload. The relevant errors are:

Event modifiers other than 'once' can only be used on DOM elementssvelte(invalid-event-modifier)
Argument of type '"submit|preventDefault"' is not assignable to parameter of type '"submit"'.ts(2345)

[laxadev]

@jaeming Is there any specific reason why you want to use <Form> instead of the <form>?

[jaeming]

@laxadev I assumed I should use the Form component since it was available. I can just use native <form> in this case. But maybe since this component does exist it would be useful if there was some documentation around the submit event, like that you will need to invoke your own preventDefault in most cases for your submit handler. It looks like it's a limitation of Svelte when it comes to using modifiers on events on custom components. Another alternative is providing a prop for invoking preventDefault. I found this Stackoverflow here on the topic: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components

I like this 2nd option: <Form preventDefault on:submit={handleSubmit}> If that is something the maintainers would consider I am happy to put in a PR for it.