Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data-sveltekit-reload href="#id" blocks subsequent beforeNavigate #12582

Closed
hyunbinseo opened this issue Aug 17, 2024 · 0 comments · Fixed by #12866
Closed

data-sveltekit-reload href="#id" blocks subsequent beforeNavigate #12582

hyunbinseo opened this issue Aug 17, 2024 · 0 comments · Fixed by #12866
Labels
bug Something isn't working

Comments

@hyunbinseo
Copy link
Contributor

hyunbinseo commented Aug 17, 2024

Describe the bug

Clicking on this anchor with a URL hash:

<a href="#message" data-sveltekit-reload></a>
  1. Blocks subsequent beforeNavigate from running
  2. Results in the following navigation object
{
  "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.

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.0

Severity

serious, but I can work around it

Additional Information

No response

@eltigerchino eltigerchino added the bug Something isn't working label Oct 23, 2024
dummdidumm added a commit that referenced this issue Oct 28, 2024
fixes #12582
fixes #12188

This PR ensures that clicking on a hash link with the reload option avoids the usual behaviour of thinking the page will reload and instead allows it to be handled as if the option wasn't enabled (hash links on the same page never reload the page).

It also fixes a behaviour where an element doesn't get focused when clicking on the hash link more than once.

---------

Co-authored-by: Simon H <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants