[Bug]: Storybook v7-rc.5 - switching between Docs and Story causes error when components depend on DOM element ids · storybookjs/storybook#21736

(2 评论) (1 反应) (0 负责人)TypeScript (89,909 star) (10,058 fork)batch import

bughelp wantedsev:S3web-components

描述

Describe the bug

We have noticed that when using Docs in stories for components that depend on javascript that references the component's DOM elements IDs, those components present issues with their functionality when switching between Docs and the component Story. Seems it has to do with how the DOM is updated during the switch.

When storybook-root is active, all inner HTML is removed from storybook-docs. This doesn't happen when storybook-docs is active, influencing the ids referred by the code and breaking the module functionality inside the Docs.

imagen

To Reproduce

Open link in Chrome, go to the Accordion Story and try switching between the Docs and the Default story. You'll notice that at first the Accordion works fine in the Docs section, but once you have switched to the Default story and back to Docs it stops working, this has to do with the issue menitoned above.

https://stackblitz.com/edit/github-ls2xe1?file=src%2Fstories%2Fmodules%2Faccordion.stories.ts,src%2Fscripts%2Fmodules%2Faccordion.ts

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.17.0 - ~/.local/share/nvm/v16.17.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - ~/.local/share/nvm/v16.17.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 107.0.1
    Safari: 16.3

Additional context

No response

贡献者指南

技术栈: typescriptreactjavascripthtmlcss
领域: frontenddeveloper experiencetooling
议题类型: bug
难度: 3
预计时间: half day
活动状态: stale
清晰度: clear
前置要求: Basic Storybook knowledgeDOM and HTML IDsJavaScript debugging
新手友好度: 60
研究方向: Investigate how Storybook's Docs addon manages DOM updates when switching between Docs and Story views. Focus on the removal of inner HTML from storybook docs element. Examine files related to Docs rendering such as addons/docs/src/blocks/... and core preview logic. Use the provided Stackblitz reproduction to identify the exact cause and propose a fix that ensures DOM IDs are preserved or components are properly re initialized.