sveltejs · eltigerchino · Apr 22, 2023 · Apr 22, 2023 · Apr 22, 2023 · Apr 22, 2023
diff --git a/.changeset/great-schools-cross.md b/.changeset/great-schools-cross.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: ensure `beforeNavigate` works on other navigations after clicking a download link
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
@@ -140,10 +140,16 @@ function clear_onward_history(current_history_index, current_navigation_index) {
  * Returns a `Promise` that never resolves (to prevent any
  * subsequent work, e.g. history manipulation, from happening)
  * @param {URL} url
+ * @returns {Promise<any>}
  */
 function native_navigation(url) {
 	location.href = url.href;
-	return new Promise(() => {});
+	return new Promise((resolve) => {
+		// if we're still on the same page after setting location.href, it was probably a download
+		if (location.href !== url.href) {
+			resolve(undefined);
+		}
+	});
 }
 
 /**
@@ -1429,6 +1435,7 @@ async function navigate({
 	}
 
 	// store this before calling `accept()`, which may change the index
+	// @ts-ignore ts doesn't know that we're calling `start()` which sets the current_history_index
 	const previous_history_index = current_history_index;
 	const previous_navigation_index = current_navigation_index;
 
@@ -1479,6 +1486,13 @@ async function navigate({
 				404
 			);
 		}
+
+		// if we're still on the same page, it's likely it was a download link
+		if (!navigation_result) {
+			stores.navigating.set(null);
+			nav.fulfil(undefined);
+			return;
+		}
 	}
 
 	// if this is an internal navigation intent, use the normalized
@@ -2248,6 +2262,9 @@ function _start_router() {
 
 			before_navigate_callbacks.forEach((fn) => fn(navigation));
 		}
+		// We need to reset the flag manually here because clicking on an
+		// implicit download link does not reset it for the next navigation.
+		is_navigating = false;
 
 		if (should_block) {
 			e.preventDefault();

diff --git a/.../kit/test/apps/basics/src/routes/navigation-lifecycle/before-navigate/download/+server.js b/.../kit/test/apps/basics/src/routes/navigation-lifecycle/before-navigate/download/+server.js
@@ -0,0 +1,7 @@
+export function GET() {
+	return new Response('ok', {
+		headers: {
+			'Content-Disposition': 'attachment'
+		}
+	});
+}
diff --git a/...ps/basics/src/routes/navigation-lifecycle/before-navigate/prevent-navigation/+page.svelte b/...ps/basics/src/routes/navigation-lifecycle/before-navigate/prevent-navigation/+page.svelte
@@ -1,13 +1,21 @@
 <script>
 	import { beforeNavigate } from '$app/navigation';
 
+	const implicit_download_url = '/navigation-lifecycle/before-navigate/download';
+
 	let times_triggered = 0;
 	let unload = false;
 	let navigation_type;
+
 	beforeNavigate(({ cancel, type, willUnload, to }) => {
 		times_triggered++;
 		unload = willUnload;
 		navigation_type = type;
+
+		// we don't cancel the `beforeunload` event for the implicit download link
+		// because it's needed for the download to occur.
+		if (to?.url.pathname === implicit_download_url) return;
+
 		if (!to?.route.id?.includes('redirect')) {
 			cancel();
 		}
@@ -20,6 +28,6 @@
 <a href="/navigation-lifecycle/before-navigate/prevent-navigation?x=1">self</a>
 <a href="https://google.com" target="_blank" rel="noreferrer">_blank</a>
 <a href="https://google.de">external</a>
-<!-- svelte-ignore a11y-invalid-attribute -->
-<a download href="">external</a>
+<a download href="/">explicit download</a>
+<a href={implicit_download_url}>implicit download</a>
 <pre>{times_triggered} {unload} {`${navigation_type}`}</pre>
diff --git a/packages/kit/test/apps/basics/test/cross-platform/client.test.js b/packages/kit/test/apps/basics/test/cross-platform/client.test.js
@@ -221,7 +221,7 @@
 		expect(await page.innerHTML('pre')).toBe('2 false goto');
 	});
 
-	test('beforeNavigate is triggered after clicking a download link', async ({ page }) => {
+	test('beforeNavigate is triggered after clicking an explicit download link', async ({ page }) => {
 		await page.goto('/navigation-lifecycle/before-navigate/prevent-navigation');
 
 		const download = page.waitForEvent('download');
@@ -235,6 +235,20 @@
 		await expect(page.locator('pre')).toHaveText('1 false link');
 	});
 
+	test('beforeNavigate is triggered after clicking an implicit download link', async ({ page }) => {
+		await page.goto('/navigation-lifecycle/before-navigate/prevent-navigation');
+
+		const download = page.waitForEvent('download');
+		await page.locator('a[href="/navigation-lifecycle/before-navigate/download"]').click();
+		await (await download).cancel();
+
+		await expect(page.locator('pre')).toHaveText('1 true link');
+
+		await page.locator('a[href="/navigation-lifecycle/before-navigate/a"]').click();
+
+		await expect(page.locator('pre')).toHaveText('2 false link');
+	});
+
 	test('afterNavigate calls callback', async ({ page, clicknav }) => {
 		await page.goto('/navigation-lifecycle/after-navigate/a');
 		expect(await page.textContent('h1')).toBe(
@@ -902,7 +916,7 @@
 		expect(tabs.length > 1);
 	});

 	test('responds to <button formtarget="_blank" submission with new tab', async ({ page }) => {
 		await page.goto('/routing/form-target-blank');

 		let tabs = page.context().pages();