storybookjs/storybook

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

Fechada

#26.060 aberto em 16 de fev. de 2024

Ver no GitHubGuia do colaborador
 (2 comentários) (4 reações) (0 responsável)TypeScript (10.058 forks)batch import
bughelp wantedsev:S4

Métricas do repositório

Stars
 (89.909 estrelas)
Métricas de merge de PR
 (Mesclagem média 7d 22h) (184 fundiu PRs em 30d)

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

Guia do colaborador

Direção de pesquisa
O bug ocorre durante a recarga a quente na página de documentação do Storybook. Investigue o comportamento de rolagem no componente do visualizador de documentação, provavelmente no pacote addon docs. Procure por qualquer lógica de restauração de rolagem que redefine para o topo nas atualizações do módulo. Verifique se há um useScrollPosition ou useLayoutEffect que é acionado na recarga a quente. O problema é reproduzível em sandboxes para as versões 7.6.16 e 8.0.0 beta.2, portanto, concentre se na base de código nessas tags.
Pilha de tecnologia
reacttypescript
Domain
frontenddocumentation
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
knowledge of Reactunderstanding of hot module replacement
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
40