'Svelte - event modifier "once" on form submit not working

Any idea why the once modifier doesn't work on form submitting in Svelte?

In the following example:

<form action="./" on:submit|preventDefault|once={() => alert('You submitted the form')}>
  <button type="submit">Save</button>
</form>

when I submit the form first time - I see the alert, but after that, when I submit - the page refreshes - as a normal form submitting.

(I tried with the button on:click - on:click|preventDefault|once... - but got same result.)



Solution 1:[1]

Looks like the 'once' is working, but after running and being removed the default submit behaviour of the form seems to be active again.

Couldn't find any information if disabling this listener is possible any other way than by adding a submit listener with preventDefault.

But this way, when adding a second listener only preventing the default, you can see that 'once' is only executed once -> REPL

<script>    
    
    function submitOnce() {
        console.log('this logs once')
        // put logic here you want to execute once
    }
    function handleSubmit() {
        // console.log('this logs with every submit')
        // this prevents default submit behaviour
    }
        
</script>

<form on:submit|preventDefault={handleSubmit} on:submit|once={submitOnce}>
  <button>Submit</button>
</form>

can simply be replaced by on:submit|preventDefault={() => {}}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1