storybookjs/storybook

[Bug]: Hot reload on docs page causes scroll to top

Closed

#26,060 opened on Feb 16, 2024

View on GitHubContributor guide
 (2 comments) (4 reactions) (0 assignees)TypeScript (10,058 forks)batch import
bughelp wantedsev:S4

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (PR metrics pending)

Description

Describe the bug

When applying a hot-reload/fast-refresh while scrolled down and looking at the docs page, the page scrolls back to the top

This is quite annoying if you're using the docs page to see multiple stories at once while working on them

To Reproduce

I've reproduced this using the sandboxes for 7.6.16 and 8.0.0-beta.2 with no modifications after running npx sb sandbox.

System

Storybook Environment Info:

  System:
    OS: macOS 14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
    Shell: 5.1.8 - /usr/local/bin/bash
  Binaries:
    Node: 18.8.0 - ~/.asdf/installs/nodejs/18.8.0/bin/node
    Yarn: 1.22.21 - ~/.asdf/installs/nodejs/18.8.0/bin/yarn
    npm: 8.18.0 - ~/.asdf/installs/nodejs/18.8.0/bin/npm <----- active
    pnpm: 8.11.0 - ~/.asdf/installs/nodejs/18.8.0/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.184
    Edge: 121.0.2277.128
    Safari: 17.3
  npmPackages:
    @storybook/addon-essentials: ^8.0.0-beta.2 => 8.0.0-beta.2
    @storybook/addon-interactions: ^8.0.0-beta.2 => 8.0.0-beta.2
    @storybook/addon-links: ^8.0.0-beta.2 => 8.0.0-beta.2
    @storybook/addon-onboarding: ^1.0.11 => 1.0.11
    @storybook/blocks: ^8.0.0-beta.2 => 8.0.0-beta.2
    @storybook/preset-create-react-app: ^8.0.0-beta.2 => 8.0.0-beta.2
    @storybook/react: ^8.0.0-beta.2 => 8.0.0-beta.2
    @storybook/react-webpack5: ^8.0.0-beta.2 => 8.0.0-beta.2
    @storybook/test: ^8.0.0-beta.2 => 8.0.0-beta.2
    storybook: ^8.0.0-beta.2 => 8.0.0-beta.2

Additional context

No response

Contributor guide

Research direction
The bug occurs during hot reload on the Storybook docs page. Investigate the scroll behavior in the docs viewer component, likely in the addon docs package. Look for any scroll restoration logic that resets to top on module updates. Check if there is a useScrollPosition or useLayoutEffect that triggers on hot reload. The issue is reproducible in sandboxes for versions 7.6.16 and 8.0.0 beta.2, so focus on the codebase at those tags.
Tech stack
reacttypescript
Domain
frontenddocumentation
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
knowledge of Reactunderstanding of hot module replacement
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40