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

useFetcher().Form scrolls to top of the page even when preventScrollReset is used #8991

Open
grinkus-adapt opened this issue Mar 6, 2024 · 0 comments
Assignees
Labels
bug:unverified feat:routing feat:scroll Issues related to scroll restoration

Comments

@grinkus-adapt
Copy link

grinkus-adapt commented Mar 6, 2024

Reproduction

  1. Go to https://stackblitz.com/edit/remix-run-remix-hztd2p
  2. In the browser panel you'll see a link to the subpage -- navigate to it.
  3. In the subpage there hopefully will be enough content for scrollbar to appear; Scroll to the bottom of the page and try submitting the form using the three buttons in red block at the bottom right-hand side of the screen.
  4. It seems that a consecutive submission of the form forces the page to scroll to top. I'm not sure when or why this happens, it seems to be time-sensitive, you might need to tweak the timeout value in app/routes/redirectme.tsx to reproduce the behavior. I can reproduce the same issue by clicking on the "Redirect with fetcher.Form" button using the return key on the keyboard (by simply pressing it down and waiting a bit).
Peek.2024-03-06.17-42.mp4

Might be related to #3145 and #4265.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: * => 2.8.0 
    @remix-run/node: * => 2.8.0 
    @remix-run/react: * => 2.8.0 
    @remix-run/serve: * => 2.8.0 
    vite: ^5.1.0 => 5.1.5

Used Package Manager

npm

Expected Behavior

The page scrollbar should stay where it is and the page should not scroll to top no matter which button (or how fast) is clicked.

Actual Behavior

The page sometimes scrolls to top.

@brophdawg11 brophdawg11 self-assigned this Mar 7, 2024
@brophdawg11 brophdawg11 added feat:routing feat:scroll Issues related to scroll restoration labels Mar 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug:unverified feat:routing feat:scroll Issues related to scroll restoration
Projects
None yet
Development

No branches or pull requests

2 participants