Same route anchor links only fire once when a hash link is preloaded with `data-sveltekit-preload-data`

[mattpilott]

Describe the bug

Clicking a link that goes to an anchor on the page works but after you remove the anchor via the page store the link no longer works.

The use case i had was using anchors for modals, modal opens on anchor link and anchor link is removed on modal close.

Reproduction

Here's my original repro

https://stackblitz.com/edit/sveltejs-kit-template-default-qwsbag?file=src%2Froutes%2F%2Bpage.svelte

and here is a different approach that highlights the same issue made by a friend

https://stackblitz.com/edit/sveltejs-kit-template-default-fnttrd?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 900.20 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /opt/homebrew/opt/node@18/bin/node
    npm: 9.5.1 - /opt/homebrew/opt/node@18/bin/npm
  Browsers:
    Firefox: 114.0.1
    Safari: 16.5.1

Severity

serious, but I can work around it

Additional Information

The only work around atm is to force a page reload on modal close, which is not ideal

[dipunm]

This is the exact thing I have been struggling with. I ended up using querystring to solve it temporarily, but I want to track this because using anchors is preferable to me.

Edit: My use case was slightly different so I modified here: https://stackblitz.com/edit/sveltejs-kit-template-default-okc8jj?file=src%2Froutes%2F%2Bpage.svelte

I have a hash based example, and a querystring based example, and the qs based example typically works fine.

[teemingc]

I don't think the issue is tied to the page store. It stems from the data-sveltekit-preload-data attribute preload causing the router to think we've already navigated to the anchor, thus doing nothing when we click on the same anchor.

The preload method gets called when hovering over the link, updating our current.url to the anchor before we even click the link.

kit/packages/kit/src/runtime/client/client.js

Lines 1574 to 1578 in 715dfdd

	if (current.url.hash === url.hash) {
	event.preventDefault();
	a.ownerDocument.getElementById(hash)?.scrollIntoView();
	return;
	}

When we first navigate to /#hello, we're caching the url /#hello under the id / while hovering over the link. After we navigate, the caching usually triggers again as we move the mouse away.

kit/packages/kit/src/runtime/client/client.js

Line 893 in 715dfdd

const id = url.pathname + url.search;

kit/packages/kit/src/runtime/client/client.js

Lines 251 to 264 in 715dfdd

	async function preload_data(intent) {
	load_cache = {
	id: intent.id,
	promise: load_route(intent).then((result) => {
	if (result.type === 'loaded' && result.state.error) {
	// Don't cache errors, because they might be transient
	load_cache = null;
	}
	return result;
	})
	};
	return load_cache.promise;
	}

When we navigate back to /, the cache id matches and the wrong navigation result is returned

kit/packages/kit/src/runtime/client/client.js

Line 988 in 715dfdd

let navigation_result = intent && (await load_route(intent));

so current.url is set to /#hello instead of /.

kit/packages/kit/src/runtime/client/client.js

Line 1083 in 715dfdd

current = navigation_result.state;

Similarly, the $page.url store gets out of sync because current.url is incorrect.

kit/packages/kit/src/runtime/client/client.js

Lines 385 to 405 in 715dfdd

	const page_changed =
	!current.url ||
	url.href !== current.url.href ||
	current.error !== error ||
	(form !== undefined && form !== page.form) ||
	data_changed;
	if (page_changed) {
	result.props.page = {
	error,
	params,
	route: {
	id: route?.id ?? null
	},
	status,
	url: new URL(url),
	form: form ?? null,
	// The whole page store is updated, but this way the object reference stays the same
	data: data_changed ? data : page.data
	};
	}