From 77a1a7318d4889356d67d31ff2e54e13a0bae158 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 23 May 2022 13:26:22 -0400
Subject: [PATCH] allow `disableScrollHandling()` to be called in
 `afterNavigate` (#4948)

* allow disableScrollHandling to be called in afterNavigate - fixes #3220

* fix tests

* remove .only

* format
---
 .changeset/polite-files-explain.md            |  5 +++
 packages/kit/src/runtime/client/client.js     | 38 +++++++++++--------
 .../anchor-afternavigate.svelte               | 17 +++++++++
 .../{anchor.svelte => anchor-onmount.svelte}  |  0
 .../anchor-with-manual-scroll/index.svelte    |  2 +-
 packages/kit/test/apps/basics/test/test.js    | 16 +++++++-
 packages/kit/types/ambient.d.ts               |  2 +-
 7 files changed, 60 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/polite-files-explain.md
 create mode 100644 packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate.svelte
 rename packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/{anchor.svelte => anchor-onmount.svelte} (100%)

diff --git a/.changeset/polite-files-explain.md b/.changeset/polite-files-explain.md
new file mode 100644
index 000000000000..7934d76e786a
--- /dev/null
+++ b/.changeset/polite-files-explain.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+allow disableScrollHandling to be called in afterNavigate
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index 3962f7d92f66..dc1c8161640a 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -232,8 +232,9 @@ export function create_client({ target, session, base, trailing_slash }) {
 	 * @param {string[]} redirect_chain
 	 * @param {boolean} no_cache
 	 * @param {{hash?: string, scroll: { x: number, y: number } | null, keepfocus: boolean, details: { replaceState: boolean, state: any } | null}} [opts]
+	 * @param {() => void} [callback]
 	 */
-	async function update(url, redirect_chain, no_cache, opts) {
+	async function update(url, redirect_chain, no_cache, opts, callback) {
 		const intent = get_navigation_intent(url);
 
 		const current_token = (token = {});
@@ -360,7 +361,6 @@ export function create_client({ target, session, base, trailing_slash }) {
 		load_cache.promise = null;
 		load_cache.id = null;
 		autoscroll = true;
-		updating = false;
 
 		if (navigation_result.props.page) {
 			page = navigation_result.props.page;
@@ -369,7 +369,9 @@ export function create_client({ target, session, base, trailing_slash }) {
 		const leaf_node = navigation_result.state.branch[navigation_result.state.branch.length - 1];
 		router_enabled = leaf_node?.module.router !== false;
 
-		return true;
+		if (callback) callback();
+
+		updating = false;
 	}
 
 	/** @param {import('./types').NavigationResult} result */
@@ -387,12 +389,12 @@ export function create_client({ target, session, base, trailing_slash }) {
 			hydrate: true
 		});
 
-		started = true;
-
 		if (router_enabled) {
 			const navigation = { from: null, to: new URL(location.href) };
 			callbacks.after_navigate.forEach((fn) => fn(navigation));
 		}
+
+		started = true;
 	}
 
 	/**
@@ -978,18 +980,22 @@ export function create_client({ target, session, base, trailing_slash }) {
 			});
 		}
 
-		const completed = await update(normalized, redirect_chain, false, {
-			scroll,
-			keepfocus,
-			details
-		});
-
-		if (completed) {
-			const navigation = { from, to: normalized };
-			callbacks.after_navigate.forEach((fn) => fn(navigation));
+		await update(
+			normalized,
+			redirect_chain,
+			false,
+			{
+				scroll,
+				keepfocus,
+				details
+			},
+			() => {
+				const navigation = { from, to: normalized };
+				callbacks.after_navigate.forEach((fn) => fn(navigation));
 
-			stores.navigating.set(null);
-		}
+				stores.navigating.set(null);
+			}
+		);
 	}
 
 	/**
diff --git a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate.svelte b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate.svelte
new file mode 100644
index 000000000000..8ef1440bd4a0
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-afternavigate.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { afterNavigate, disableScrollHandling } from '$app/navigation';
+
+	afterNavigate(() => {
+		disableScrollHandling();
+		document.getElementById('abcde')?.scrollIntoView();
+	});
+</script>
+
+<div style="height: 180vh; background-color: hotpink;">They (don't) see me...</div>
+<div style="height: 180vh; background-color: peru;">
+	<p id="go-to-element">The browser scrolls to me</p>
+</div>
+<p id="abcde" style="height: 180vh; background-color: hotpink;">I take precedence</p>
+<div />
+
+<a href="/anchor-with-manual-scroll/anchor-afternavigate?x=y#go-to-element">reload me</a>
\ No newline at end of file
diff --git a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor.svelte b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-onmount.svelte
similarity index 100%
rename from packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor.svelte
rename to packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/anchor-onmount.svelte
diff --git a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/index.svelte b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/index.svelte
index 9a292a21b748..7608357a88c0 100644
--- a/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/index.svelte
+++ b/packages/kit/test/apps/basics/src/routes/anchor-with-manual-scroll/index.svelte
@@ -1,5 +1,5 @@
 <h1>Welcome to a test project</h1>
-<a href="/anchor-with-manual-scroll/anchor#go-to-element">Anchor demo</a>
+<a href="/anchor-with-manual-scroll/anchor-onmount#go-to-element">Anchor demo</a>
 
 <style>
 	:global(body) {
diff --git a/packages/kit/test/apps/basics/test/test.js b/packages/kit/test/apps/basics/test/test.js
index 56ba9abb468d..9d60f4964009 100644
--- a/packages/kit/test/apps/basics/test/test.js
+++ b/packages/kit/test/apps/basics/test/test.js
@@ -259,7 +259,19 @@ test.describe('Scrolling', () => {
 		page,
 		in_view
 	}) => {
-		await page.goto('/anchor-with-manual-scroll/anchor#go-to-element');
+		await page.goto('/anchor-with-manual-scroll/anchor-onmount#go-to-element');
+		expect(await in_view('#abcde')).toBe(true);
+	});
+
+	test('url-supplied anchor is ignored with afterNavigate() scrolling on direct page load', async ({
+		page,
+		in_view,
+		clicknav
+	}) => {
+		await page.goto('/anchor-with-manual-scroll/anchor-afternavigate#go-to-element');
+		expect(await in_view('#abcde')).toBe(true);
+
+		await clicknav('[href="/anchor-with-manual-scroll/anchor-afternavigate?x=y#go-to-element"]');
 		expect(await in_view('#abcde')).toBe(true);
 	});
 
@@ -270,7 +282,7 @@ test.describe('Scrolling', () => {
 		in_view
 	}) => {
 		await page.goto('/anchor-with-manual-scroll');
-		await clicknav('[href="/anchor-with-manual-scroll/anchor#go-to-element"]');
+		await clicknav('[href="/anchor-with-manual-scroll/anchor-onmount#go-to-element"]');
 		if (javaScriptEnabled) expect(await in_view('#abcde')).toBe(true);
 		else expect(await in_view('#go-to-element')).toBe(true);
 	});
diff --git a/packages/kit/types/ambient.d.ts b/packages/kit/types/ambient.d.ts
index 5d1e7da7ba10..89a0285f2d2d 100644
--- a/packages/kit/types/ambient.d.ts
+++ b/packages/kit/types/ambient.d.ts
@@ -88,7 +88,7 @@ declare module '$app/env' {
  */
 declare module '$app/navigation' {
 	/**
-	 * If called when the page is being updated following a navigation (in `onMount` or an action, for example), this disables SvelteKit's built-in scroll handling.
+	 * If called when the page is being updated following a navigation (in `onMount` or `afterNavigate` or an action, for example), this disables SvelteKit's built-in scroll handling.
 	 * This is generally discouraged, since it breaks user expectations.
 	 */
 	export function disableScrollHandling(): void;