Addon-docs may create multiple HTML elements with the same ID

[benj-dobs]

Describe the bug
Because switching to the Docs tab from the Canvas tab merely hides the Canvas, rather than removing it from the document, the default Docs are likely to result in elements being duplicated between the Canvas and the Docs tab, including having multiple elements with the same HTML ID.

For example, the result of this repro case is:

Click to expand

<div id="root" hidden="true">
  <svg width="16" height="16">
    <defs>
      <clipPath id="id-clip-path">
        <circle cx="8" cy="8" r="8"></circle>
      </clipPath>
    </defs>
    <rect
      width="16"
      height="16"
      fill="#09f"
      clip-path="url('#id-clip-path')"
    ></rect>
  </svg>
</div>
<div id="docs-root">
  <div class="sbdocs sbdocs-wrapper css-zgt7u1">
    <div class="sbdocs sbdocs-content css-1gh4yjl">
      <h1 class="sbdocs-title css-z9ai3">Circle</h1>
      <div id="anchor--circle--circle">
        <div class="sbdocs sbdocs-preview css-1fqqvvq">
          <div
            class="os-host os-host-foreign os-theme-dark os-host-overflow os-host-overflow-y os-host-resize-disabled os-host-scrollbar-horizontal-hidden css-vcinso os-host-transition"
          >
            <div class="os-resize-observer-host observed">
              <div
                class="os-resize-observer"
                style="left: 0px; right: auto"
              ></div>
            </div>
            <div
              class="os-size-auto-observer observed"
              style="height: calc(100% + 1px); float: left"
            >
              <div class="os-resize-observer"></div>
            </div>
            <div
              class="os-content-glue"
              style="margin: 0px; width: 942px; height: 39px"
            ></div>
            <div class="os-padding">
              <div
                class="os-viewport os-viewport-native-scrollbars-invisible os-viewport-native-scrollbars-overlaid"
                style="overflow-y: scroll"
              >
                <div
                  class="os-content"
                  style="padding: 0px; height: 100%; width: 100%"
                >
                  <div class="css-p1dfi6">
                    <div class="css-1amsdi0">
                      <button type="button" title="Zoom in" class="css-1k5e3f">
                        <svg viewBox="0 0 1024 1024" class="css-ha8kg">
                          <path
                            d="M220 670a316 316 0 0 1 0-450 316 316 0 0 1 450 0 316 316 0 0 1 0 450 316 316 0 0 1-450 0zm749 240L757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59zM487 604a42 42 0 0 1-84 0V487H286a42 42 0 1 1 0-84h117V286a42 42 0 1 1 84 0v117h117a42 42 0 0 1 0 84H487v117z"
                            class="css-kqzqgg"
                          ></path>
                        </svg></button
                      ><button
                        type="button"
                        title="Zoom out"
                        class="css-1k5e3f"
                      >
                        <svg viewBox="0 0 1024 1024" class="css-ha8kg">
                          <path
                            d="M757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59L757 698zM126 445a316 316 0 0 1 319-319 316 316 0 0 1 318 319 316 316 0 0 1-318 318 316 316 0 0 1-319-318zm160 42a42 42 0 1 1 0-84h318a42 42 0 0 1 0 84H286z"
                            class="css-kqzqgg"
                          ></path>
                        </svg></button
                      ><button
                        type="button"
                        title="Reset zoom"
                        class="css-1k5e3f"
                      >
                        <svg viewBox="0 0 1024 1024" class="css-ha8kg">
                          <path
                            d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
                            class="css-kqzqgg"
                          ></path>
                        </svg>
                      </button>
                    </div>
                    <div class="css-102is01">
                      <a
                        href="./iframe.html?id=circle--circle"
                        target="_blank"
                        title="Open canvas in new tab"
                        class="css-1k5e3f"
                        ><svg viewBox="0 0 1024 1024" class="css-ha8kg">
                          <path
                            d="M896.006 920c0 22.090-17.91 40-40 40h-688.006c-22.090 0-40-17.906-40-40v-549.922c-0.838-3.224-1.33-6.588-1.33-10.072 0-22.090 17.908-40.004 40-40.004h178.66c22.092 0.004 40 17.914 40 40.004 0 22.088-17.908 40-40 40h-137.33v479.996h607.998v-479.996h-138.658c-22.090 0-40-17.912-40-40 0-22.090 17.906-40.004 40-40.004h178.658c22.090 0 40 17.91 40 40v559.844c0 0.050 0.008 0.102 0.008 0.154zM665.622 200.168l-124.452-124.45c-8.042-8.042-18.65-11.912-29.186-11.674-1.612-0.034-3.222 0-4.828 0.16-0.558 0.054-1.098 0.16-1.648 0.238-0.742 0.104-1.484 0.192-2.218 0.338-0.656 0.13-1.29 0.31-1.934 0.472-0.622 0.154-1.244 0.292-1.86 0.476-0.64 0.196-1.258 0.436-1.886 0.66-0.602 0.216-1.208 0.414-1.802 0.66-0.598 0.248-1.17 0.54-1.754 0.814-0.598 0.282-1.202 0.546-1.788 0.86-0.578 0.312-1.13 0.664-1.694 1-0.552 0.332-1.116 0.644-1.654 1.006-0.67 0.448-1.3 0.942-1.942 1.426-0.394 0.302-0.806 0.576-1.196 0.894-1.046 0.858-2.052 1.768-3.008 2.726l-124.398 124.39c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l56.164-56.166v439.426c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-441.202l57.942 57.942c15.622 15.624 40.948 15.62 56.568 0 15.626-15.618 15.626-40.946 0.002-56.566z"
                            class="css-kqzqgg"
                          ></path></svg
                      ></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable os-scrollbar-auto-hidden"
            >
              <div class="os-scrollbar-track os-scrollbar-track-off">
                <div
                  class="os-scrollbar-handle"
                  style="width: 100%; transform: translate(0px, 0px)"
                ></div>
              </div>
            </div>
            <div
              class="os-scrollbar os-scrollbar-vertical os-scrollbar-auto-hidden"
            >
              <div class="os-scrollbar-track os-scrollbar-track-off">
                <div
                  class="os-scrollbar-handle"
                  style="height: 80%; transform: translate(0px, 0px)"
                ></div>
              </div>
            </div>
            <div class="os-scrollbar-corner"></div>
          </div>
          <div class="docs-story css-kdwx3d">
            <div class="css-1wjen9k">
              <div scale="1" height="40" class="css-10skpf4">
                <div class="innerZoomElementWrapper">
                  <div>
                    <div id="story--circle--circle">
                      <svg id="id" width="16" height="16">
                        <defs>
                          <clipPath id="id-clip-path">
                            <circle cx="8" cy="8" r="8"></circle>
                          </clipPath>
                        </defs>
                        <rect
                          width="16"
                          height="16"
                          fill="#09f"
                          clip-path="url('#id-clip-path')"
                        ></rect>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="css-11xgcgt">
              <button class="docblock-code-toggle css-3ltsna">Show code</button>
            </div>
          </div>
        </div>
      </div>
      <div class="css-14m39zm">
        <table aria-hidden="false" class="docblock-argstable css-6hhrgj">
          <thead class="docblock-argstable-head">
            <tr>
              <th><span>Name</span></th>
              <th><span>Description</span></th>
              <th><span>Default</span></th>
              <th>
                <span class="css-gg4vpm"
                  >Control
                  <button title="Reset controls" class="css-1m2jg1k">
                    <svg
                      viewBox="0 0 1024 1024"
                      aria-hidden="true"
                      class="css-ha8kg"
                    >
                      <path
                        d="M230 301h480a240 240 0 1 1 0 481H235c-23 0-42-20-42-43 0-24 19-43 42-43h475a155 155 0 0 0 0-310H228l3 3 65 65a45 45 0 0 1-65 64L90 376a45 45 0 0 1 0-64l142-142a45 45 0 1 1 64 65l-63 62-3 4z"
                        class="css-kqzqgg"
                      ></path>
                    </svg></button
                ></span>
              </th>
            </tr>
          </thead>
          <tbody class="docblock-argstable-body">
            <tr>
              <td class="css-4lbn0a">
                <span class="css-in3yi3">id</span
                ><span title="Required" class="css-1ywjlcj">*</span>
              </td>
              <td>
                <div class="css-9gifa">
                  <div class="css-13nzt7e">
                    <span class="css-ks2jcn">string</span>
                  </div>
                </div>
              </td>
              <td><span>-</span></td>
              <td>
                <label class="css-k008qs">
                  <textarea
                    id="control-id"
                    placeholder="Edit string..."
                    name="id"
                    class="css-141ccx4"
                    style="height: 20px !important"
                  >
id</textarea
                  >
                </label>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Notice that the svg and clip-path elements are repeated with the same ID.

Furthermore, because the first clip-path in the document is contained in a display: none element, the clip-path becomes essentially non-functional. As such, the SVG is rendered correctly as a circle on the Canvas tab, but incorrectly as a square on the Docs tab.

To Reproduce
Source code · Live Storybook

1. Run yarn storybook.
2. Select the Circle Story.
3. Note that it renders as a blue circle on the Canvas tab.
4. Switch to the Docs tab.
   Expected result: It also renders as a blue circle on the Docs tab.
   Actual result: It renders as a blue square on the Docs tab.

Reproduced on Firefox and Chrome on macOS (latest versions). Not reproduced on Safari on macOS.

System

Environment Info:

  System:
    OS: macOS 12.2
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 3.1.1 - ~/.yarn/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 96.0.3
    Safari: 15.3
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.32 => 6.5.0-alpha.32 
    @storybook/addon-docs: ^6.5.0-alpha.32 => 6.5.0-alpha.32 
    @storybook/addon-essentials: ^6.5.0-alpha.32 => 6.5.0-alpha.32 
    @storybook/addon-links: ^6.5.0-alpha.32 => 6.5.0-alpha.32 
    @storybook/react: ^6.5.0-alpha.32 => 6.5.0-alpha.32 

Additional context
N/A

[javier-zabala-lenio]

I've found the same issue.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).