Issue 622

src/lib/client/form.ts

@@ -1,7 +1,8 @@
-import { isElementInViewport, scrollToAndCenter } from './elements.js';
-import type { FormOptions } from './superForm.js';
+import { afterNavigate } from '$app/navigation';
 import { onDestroy, tick } from 'svelte';
 import type { Writable } from 'svelte/store';
+import { isElementInViewport, scrollToAndCenter } from './elements.js';
+import type { FormOptions } from './superForm.js';
 
 enum FetchStatus {
 	Idle = 0,
@@ -120,6 +121,11 @@ export function Form<T extends Record<string, unknown>, M>(
 			completed({ cancelled: true });
 		});
 
+		afterNavigate(() => {
+			ErrorTextEvents_removeErrorTextListeners();
+			completed({ cancelled: false });
+		})
+
 		return {
 			submitting() {
 				Timers_start();

src/routes/(v2)/v2/issue-622/+layout.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { page } from '$app/state';
+
+	let { children } = $props();
+</script>
+
+<p>Navigation</p>
+<ul>
+	<li><a href="/v2/issue-622/good?start">Good</a></li>
+	<li><a href="/v2/issue-622/bad?start">Bad</a></li>
+	<li>
+		<a href="/v2/issue-622/bad-with-workaround?start"
+			>Bad with workaround (timeoutMs > action delay)</a
+		>
+	</li>
+</ul>
+
+<p>Page id: {page.route.id}</p>
+{@render children()}

src/routes/(v2)/v2/issue-622/bad-with-workaround/+page.server.ts

@@ -0,0 +1,24 @@
+import { zod as zod4 } from '$lib/adapters/zod4.js';
+import { superValidate } from '$lib/index.js';
+import { redirect } from '@sveltejs/kit';
+import { z } from 'zod/v4';
+
+
+const delay = (ms: number) => new Promise(r => setTimeout(r, ms))
+
+const formId = "test-bad-with-workaround"
+
+const ZodSchema = z.object({ hello: z.string() })
+const FormSchema = zod4(ZodSchema)
+
+export async function load() {
+    const form = await superValidate(FormSchema, { id: formId })
+    return { form }
+}
+
+export const actions = {
+    async default() {
+        await delay(5000)
+        redirect(302, "/v2/issue-622/bad-with-workaround")
+    }
+}

src/routes/(v2)/v2/issue-622/bad-with-workaround/+page.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import SuperDebug, { superForm } from '$lib/index.js';
+
+	let { data } = $props();
+
+	const form = superForm(data.form, {
+		dataType: 'json',
+		scrollToError: true,
+		autoFocusOnError: 'detect',
+		taintedMessage: false,
+		validationMethod: 'submit-only',
+		resetForm: false,
+		invalidateAll: false,
+		applyAction: true,
+		delayMs: 500,
+		timeoutMs: 10000
+	});
+	const { enhance, submitting, delayed, timeout, reset } = form;
+
+	const time = () => new Date().toISOString();
+
+	page.subscribe((v) => console.log(`${time()}: Page store update`, { page: v }));
+</script>
+
+<form method="post" use:enhance action="/v2/issue-622/bad-with-workaround?start">
+	<button>Submit</button>
+</form>
+
+<SuperDebug data={{ $submitting, $delayed, $timeout }} />

src/routes/(v2)/v2/issue-622/bad/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod as zod4 } from '$lib/adapters/zod4.js';
+import { superValidate } from '$lib/index.js';
+import { redirect } from '@sveltejs/kit';
+import { z } from 'zod/v4';
+
+const delay = (ms: number) => new Promise(r => setTimeout(r, ms))
+
+const formId = "test-bad"
+
+const ZodSchema = z.object({ hello: z.string() })
+const FormSchema = zod4(ZodSchema)
+
+export async function load() {
+    const form = await superValidate(FormSchema, { id: formId })
+    return { form }
+}
+
+export const actions = {
+    async default() {
+        await delay(5000)
+        redirect(302, "/v2/issue-622/bad")
+    }
+}

src/routes/(v2)/v2/issue-622/bad/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+	import SuperDebug, { superForm } from '$lib/index.js';
+
+	let { data } = $props();
+
+	const form = superForm(data.form, {
+		dataType: 'json',
+		scrollToError: true,
+		autoFocusOnError: 'detect',
+		taintedMessage: false,
+		validationMethod: 'submit-only',
+		resetForm: false,
+		invalidateAll: false,
+		applyAction: true,
+		delayMs: 500,
+		timeoutMs: 1000,
+		onResult(event) {
+			console.log('onResult', event);
+		}
+	});
+	const { enhance, submitting, delayed, timeout, reset } = form;
+
+	const time = () => new Date().toISOString();
+
+	page.subscribe((v) => console.log(`${time()}: Page store update`, { page: v }));
+	afterNavigate((p) => console.log('afterNavigate', p));
+</script>
+
+<form method="post" use:enhance action="/v2/issue-622/bad?start">
+	<button>Submit</button>
+</form>
+
+<SuperDebug data={{ $submitting, $delayed, $timeout }} />

src/routes/(v2)/v2/issue-622/good/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod as zod4 } from '$lib/adapters/zod4.js';
+import { superValidate } from '$lib/index.js';
+import { z } from 'zod/v4';
+
+const delay = (ms: number) => new Promise(r => setTimeout(r, ms))
+
+const formId = "test-good"
+
+const ZodSchema = z.object({ hello: z.string() })
+const FormSchema = zod4(ZodSchema)
+
+export async function load() {
+    const form = await superValidate(FormSchema, { id: formId })
+    return { form }
+}
+
+export const actions = {
+    async default() {
+        await delay(5000)
+        const form = await superValidate(FormSchema, { id: formId })
+        return { form }
+    }
+}

src/routes/(v2)/v2/issue-622/good/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import SuperDebug, { superForm } from '$lib/index.js';
+
+	let { data } = $props();
+
+	const form = superForm(data.form, {
+		dataType: 'json',
+		scrollToError: true,
+		autoFocusOnError: 'detect',
+		taintedMessage: false,
+		validationMethod: 'submit-only',
+		resetForm: false,
+		invalidateAll: false,
+		applyAction: true,
+		delayMs: 500,
+
+		timeoutMs: 1000
+	});
+	const { enhance, submitting, delayed, timeout, reset } = form;
+
+	const time = () => new Date().toISOString();
+
+	page.subscribe((v) => console.log(`${time()}: Page store update`, { page: v }));
+</script>
+
+<form method="post" use:enhance action="/v2/issue-622/good?start">
+	<button>Submit</button>
+</form>
+
+<SuperDebug data={{ $submitting, $delayed, $timeout }} />