sveltejs / sveltejs/kit

`beforeNavigate` doesn't fire after clicking on anchor tag that has `content-disposition: attachment` in header response

Open
#9,744 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

router
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

This application has two pages - a home page at / and an about page at /about.
You can click between the two pages using the links in the header, or the links that appear on each page.
Each time you click, BEFORE NAVIGATE IS RUNNING logs to the console.
If you click the PDF Url link at the bottom, beforeNavigate runs as normal, logging BEFORE NAVIGATE IS RUNNING to the console.
The next link you click, beforeNavigate does not run.

I believe this happens because the content-disposition:attachment header is set in the response, causing the browser to download the file. By this point, I guess SvelteKit assumes the page navigation happens, and so missed the next beforeNavigate.

If you change the link from
<a href="https://dl.dropbox.com/s/xw52umod2vx850t/pdf-test.pdf?dl=0">PDF Url</a>
to <a href="https://www.dropbox.com/s/xw52umod2vx850t/pdf-test.pdf?dl=0">PDF Url</a> (ie, change subdomain to www from dl), then the header is not set, and the behaviour works as expected.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-skdwaq?file=src/routes/+layout.svelte

You need to use 'Open in New Tab' in the topright of the stackblitz link to get this demonstration to work.

Logs

No response

System Info
❯ npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite}"
success Install finished in 1.129s


  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0 
    @sveltejs/kit: 1.15.7 => 1.15.7 
    svelte: ^3.54.0 => 3.58.0 
    vite: ^4.2.0 => 4.2.1
Severity

serious, but I can work around it

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by opening the linked StackBlitz reproduction and inspect src/routes/+layout.svelte, especially the beforeNavigate setup. Reproduce the attachment download, then navigate to another internal page and compare console output before and after the download. Done means beforeNavigate fires reliably on the next navigation without changing the expected download behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.