QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.46k stars 1.26k forks source link

[🐞] <Link scroll={false}... to same path still scrolls #6411

Open williamsdyyz opened 1 month ago

williamsdyyz commented 1 month ago

Which component is affected?

Qwik Runtime

Describe the bug

I'm trying to show dialog boxes based on a search param like <Link href="./?dialog=about" scroll={false}>About us</Link>

I need the scroll position of the document to stay put when the user clicks the link. Unfortunately scroll={false} isn't doing that.

Reproduction

https://stackblitz.com/edit/qwik-starter-wvympk?file=src%2Froutes%2Flink-scroll%2Findex.tsx

Steps to reproduce

  1. Run npm install & npm dev.
  2. Go to the /link-scroll route in the browser
  3. Scroll down
  4. Click any link
  5. Document scrolls to top

System Info

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: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @builder.io/qwik: ^1.4.3 => 1.4.3 
    @builder.io/qwik-city: ^1.4.3 => 1.4.3 
    typescript: 5.3.3 => 5.3.3 
    undici: 5.28.2 => 5.28.2 
    vite: 4.5.2 => 4.5.2

Additional Information

No response

JerryWu1234 commented 1 month ago

image

please help to check link

JerryWu1234 commented 1 month ago

https://qwikstarterwvympk-skus--5173--71ef666c.local-credentialless.webcontainer.io/link-scroll @williamsdyyz

williamsdyyz commented 1 month ago

@JerryWu1234 Link updated in the original post. Apologies, I'm not too familiar with Stackblitz

maiieul commented 1 month ago

I can only see that in your stackblitz @williamsdyyz

image
williamsdyyz commented 1 month ago

Append /link-scroll to the address in the preview pane. The share link I created already had that. But I guess not. ¯_(ツ)_/¯ I also added a link on the first page since Stackblitz and I are having a disagreement.

shairez commented 1 month ago

thanks @williamsdyyz

So the purpose of the scroll value is for using the "back" button to go back to a route and have it "remember" the scroll position.

For navigating normally, it doesn't remember the scroll positions, only for going back in history.

Maybe this should be documented better?

williamsdyyz commented 1 month ago

@shairez Interesting. False assumption on my part. That prop is not documented at all.

In that case, the issue changes somewhat. For the use-case of showing a modal dialog that can be closed with the back button (similar to Android UX), there is no way to stop the navigation to the dialog from scrolling the underlying document to top.

I've added an example to the link-scroll page: scroll down, click "Open dialog". The dialog appears but the document scrolls to top which is undesirable. The back button nicely closes the dialog and the scroll position is restored to where it should ideally have been all along.

I guess this is really a feature request, not a bug.

Is there any existing way to achieve what I need?