Repository navigation
data-sveltekit-reload href="#id" blocks subsequent beforeNavigate #12582
Description
Describe the bug
Clicking on this anchor with a URL hash:
<a href="#message" data-sveltekit-reload></a>- Blocks subsequent
beforeNavigatefrom running - Results in the following
navigationobject
{
"from": { "params": {}, "route": { "id": "/" }, "url": "http://localhost:5174/" },
// Even if it is a data-sveltekit-reload anchor navigation,
// params and route can be populated in a hash navigation.
"to": { "params": null, "route": { "id": null }, "url": "http://localhost:5174/#message" },
"willUnload": true, // should be false
"type": "link",
"complete": {}
}This seems to be causing the following issue,
because using plain HTML is a valid workaround.
{@html '<a href="#message">Show hidden message</a>'}Usage
Skip navigation using hash URL anchor.
Fix :target CSS pseudo-class styling.
- Anchor with #hash not showing :target CSS after history.back() #10550
- CSS :target selector does not work after page move #11848
Reproduction
<!-- src/routes/+page.svelte -->
<script>
import { beforeNavigate } from '$app/navigation';
beforeNavigate((navigation) => console.log(navigation));
</script>
<!-- Click the anchors in order. -->
<ol>
<li><a href="#message" data-sveltekit-reload>Show hidden message</a></li>
<!-- beforeNavigate() is not called. -->
<li><a href="/page">Goto another page</a></li>
</ol>
<span id="message">This is the hidden message.</span>
<style>
#message:not(:target) {
display: none;
}
</style><!-- src/routes/page/+page.svelte -->
<p>Press the browser's back button</p>
<p>You probably have to click it twice</p>Logs
No response
System Info
System:
OS: macOS 14.6.1
CPU: (10) arm64 Apple M1 Pro
Memory: 202.06 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.16.0 - ~/.local/state/fnm_multishells/96031_1723864577634/bin/node
npm: 10.8.1 - ~/.local/state/fnm_multishells/96031_1723864577634/bin/npm
pnpm: 9.7.0 - ~/.local/state/fnm_multishells/96031_1723864577634/bin/pnpm
Browsers:
Chrome: 127.0.6533.120
Edge: 127.0.2651.105
Safari: 17.6
npmPackages:
@sveltejs/adapter-auto: ^3.2.4 => 3.2.4
@sveltejs/kit: ^2.5.22 => 2.5.22
@sveltejs/vite-plugin-svelte: ^3.1.1 => 3.1.1
svelte: ^4.2.18 => 4.2.18
vite: ^5.4.0 => 5.4.0Severity
serious, but I can work around it
Additional Information
No response
Activity
fix: defer when clicking hash links with data-sveltekit-reload (#12866)