Redirect problem in SPA mode. Fixes #360.

Author: ciscoheat

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `defaults` didn't generate correct `SuperValidated` data, making `superForm` confused. Also fixed type signature and removed the `jsonSchema` option that wasn't applicable.
 - A successful `PageData` result from `invalidateAll` was overwritten by the `ActionData` result.
+- Using `goto` in events didn't work when the target page redirected.
 
 ## [2.5.0] - 2024-02-21
 

src/lib/client/superForm.ts

@@ -1781,15 +1781,22 @@ export function superForm<
 							};
 
 					currentRequest = null;
+
 					let cancelled = false;
+					const cancel = () => (cancelled = true);
 
 					const data = {
 						result,
 						formEl: FormElement,
 						formElement: FormElement,
-						cancel: () => (cancelled = true)
+						cancel
 					};
 
+					// Check for goto in the events
+					const unsubCheckforNav = navigating.subscribe(($nav) => {
+						if ($nav) cancel();
+					});
+
 					for (const event of formEvents.onResult) {
 						await event(data);
 					}
@@ -1914,6 +1921,8 @@ export function superForm<
 							}
 						});
 					}
+
+					unsubCheckforNav();
 				}
 
 				return validationResponse;

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

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { defaults, superForm } from '$lib/index.js';
+	import { zod } from '$lib/adapters/zod.js';
+	import SuperDebug from '$lib/index.js';
+	import { goto } from '$app/navigation';
+
+	import { schema } from './schema.js';
+
+	export let data;
+
+	const form = superForm(defaults(zod(schema)), {
+		SPA: true,
+		validators: zod(schema),
+		async onUpdate() {
+			// uncomment out this line to fix the redirect
+			//cancel();
+			await goto('/v2/issue-360/target');
+			// navigating directly to the second target (no redirect) works fine
+			// await goto('/v2/issue-360/second-target');
+		}
+	});
+
+	const { form: formStore, message, enhance } = form;
+</script>
+
+<SuperDebug data={$formStore} />
+
+<h3>Superforms testing ground - Zod</h3>
+
+{#if $message}
+	<!-- eslint-disable-next-line svelte/valid-compile -->
+	<div class="status" class:error={$page.status >= 400} class:success={$page.status == 200}>
+		{$message}
+	</div>
+{/if}
+
+<form method="POST" use:enhance>
+	<button>Submit</button>
+</form>
+
+<hr />
+<p><a target="_blank" href="https://superforms.rocks/api">API Reference</a></p>
+
+<style>
+	.invalid {
+		color: red;
+	}
+
+	.status {
+		color: white;
+		padding: 4px;
+		padding-left: 8px;
+		border-radius: 2px;
+		font-weight: 500;
+	}
+
+	.status.success {
+		background-color: seagreen;
+	}
+
+	.status.error {
+		background-color: #ff2a02;
+	}
+
+	input {
+		background-color: #ddd;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+
+	hr {
+		margin-top: 4rem;
+	}
+
+	form {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+</style>

src/routes/(v2)/v2/issue-360/schema.ts

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+
+export const schema = z.object({});

src/routes/(v2)/v2/issue-360/second-target/+page.svelte

@@ -0,0 +1,2 @@
+<p>Second redirect successful</p>
+<a href="/">Go home</a>

src/routes/(v2)/v2/issue-360/target/+page.svelte

@@ -0,0 +1,2 @@
+<p>First redirect target</p>
+<a href="/">Go home</a>

src/routes/(v2)/v2/issue-360/target/+page.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load() {
+	redirect(303, '/v2/issue-360/second-target');
+}