Using `form` with a stateful schema in `preflight` and `enhance` causes exponential submissions

[mkienitz]

Describe the bug

When using form remote function with a dynamic/stateful (e.g. $derived from a query function) preflight validation and, at the same time, using enhance to prevent form field resets:

1. Submitting the form for the first time triggers the remote function one time
2. The second time, two more calls are made
3. Upon the third time, 4 more calls are made, then 8, etc.

The linked REPL also includes a reset button for the queried value the dynamic schema depends on.
If you press the command 5 times (fresh state), the form function gets called 5 + 1 times when you finally invoke it. A second invocation then would increase the call count from 6 to 12 etc.

Basically, everytime the server sends back the query result that the schema depends on (after both reset & increment), we increase the misbehavior.

The app behaves as expected when:

• removing the enhance (which will make the fields reset again)
• plugging in a "static" validation schema into preflight instead

I am not sure if this is a duplicate of #14546 where the same issue is triggered from a slightly different setup.

Reproduction

Try out this REPL to immediately see the observed issue: https://www.sveltelab.dev/nyh216e52lcv453

Just click the "Increment" button a few times

Logs

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/kit: ^2.5.27 => 2.49.4 
    @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.1.1 
    svelte: ^5 => 5.46.3 
    vite: ^6.0.0 => 6.4.1

Severity

blocking an upgrade

Additional Information

No response

[Rishab49]

The reason of this exponential submissions is that we are not removing the anonymous event listeners which we are adding to the form element. I made the following changes locally inside create_attachment function and it seems to work fine.

Note : I found this solution on local PR of by Evertt

1. Converted anonymous functions to separate functions.
2. added them to form using addEventListener and finally removed them using removeEventListener

kit/packages/kit/src/runtime/client/remote-functions/form.svelte.js

Lines 403 to 416 in 391c6f7

	form.addEventListener('reset', async () => {
	// need to wait a moment, because the `reset` event occurs before
	// the inputs are actually updated (so that it can be cancelled)
	await tick();
	input = convert_formdata(new FormData(form));
	});
	return () => {
	element = null;
	preflight_schema = undefined;
	};
	};
	}

const oninput = (/** @type {Event} */e) => {
	//function body
}

const onreset =  async () => {
	// need to wait a moment, because the `reset` event occurs before
	// the inputs are actually updated (so that it can be cancelled)
	await tick();

	input = convert_formdata(new FormData(form));
}
form.addEventListener('input', oninput);

form.addEventListener('reset',onreset);

return () => {
	element = null;
	preflight_schema = undefined;

	form.removeEventListener("submit",onsubmit);
	form.removeEventListener("submit",oninput);
	form.removeEventListener("submit",onreset);
};

[PatrickG]

I Confirmed (by installing npm i -D https://pkg.pr.new/sveltejs/kit/@sveltejs/kit@a315c31 in your reproduction repl) that the fix (#15286) for #14546 also fixes this issue.
So, I close this as a duplicate.