Skip to content

[Bug]: Unable to paste from clipboard in v9 #31626

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.

Sign up for GitHub

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

Jump to bottom
Closed
onx2 opened this issue May 31, 2025 · 9 comments · Fixed by #31682 or #31730
Closed

[Bug]: Unable to paste from clipboard in v9 #31626

onx2 opened this issue May 31, 2025 · 9 comments · Fixed by #31682 or #31730
Assignees
@ghengeveld
Labels
bug sev:S2 upgrade:9.0
Milestone
9.0 Stabilization

Comments

@onx2
Copy link

onx2 commented May 31, 2025

Describe the bug

Using the navigator.clipboard API doesn't work like it used to. I can confirm that I am able to writeText and readText fine, but when I go to paste it doesn't work. I see there is allow="clipboard-write" in both versions so I'm not sure what changed.

Reproduction link

https://stackblitz.com/edit/github-slbxsupt?file=src%2Fstories%2FButton.tsx&preset=node

Reproduction steps

  • Go to the button story
  • click the button
  • try to paste anywhere (console, vscode, url)
  • It should be the last thing you copied and not the text I added "this can't be pasted anywhere"

System

Storybook Environment Info:

  System:
    OS: macOS 15.5
    CPU: (16) arm64 Apple M3 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.volta/tools/image/node/22.14.0/bin/node
    Yarn: 1.22.22 - ~/.volta/tools/image/yarn/1.22.22/bin/yarn
    npm: 10.2.5 - ~/.volta/tools/image/npm/10.2.5/bin/npm
  Browsers:
    Chrome: 137.0.7151.56
    Safari: 18.5
  npmPackages:
    @storybook/addon-a11y: 9.0.1 => 9.0.1 
    @storybook/addon-docs: 9.0.1 => 9.0.1 
    @storybook/addon-vitest: 9.0.1 => 9.0.1 
    @storybook/icons: 1.4.0 => 1.4.0 
    @storybook/react-vite: 9.0.1 => 9.0.1 
    eslint-plugin-storybook: 9.0.1 => 9.0.1 
    storybook: 9.0.1 => 9.0.1

Additional context

I verified it was working in v8.6.14. Here is the info from my PR prior to upgrading to v9.

Storybook Environment Info:

System:
OS: macOS 15.5
CPU: (16) arm64 Apple M3 Max
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.14.0 - ~/.volta/tools/image/node/22.14.0/bin/node
Yarn: 1.22.22 - ~/.volta/tools/image/yarn/1.22.22/bin/yarn
npm: 10.2.5 - ~/.volta/tools/image/npm/10.2.5/bin/npm
Browsers:
Chrome: 137.0.7151.56
Safari: 18.5
npmPackages:
@storybook/addon-a11y: 8.6.14 => 8.6.14
@storybook/addon-essentials: 8.6.14 => 8.6.14
@storybook/addon-interactions: 8.6.14 => 8.6.14
@storybook/blocks: 8.6.14 => 8.6.14
@storybook/react-vite: 8.6.14 => 8.6.14
@storybook/test: 8.6.14 => 8.6.14
eslint-plugin-storybook: 0.12.0 => 0.12.0
storybook: 8.6.14 => 8.6.14
storybook-addon-rtl: 1.1.0 => 1.1.0
storybook-dark-mode: 4.0.2 => 4.0.2
@onx2 onx2 changed the title [Bug]: Unable to copy to clipboard in v9 [Bug]: Unable to paste from clipboard in v9 May 31, 2025
@szympajka
Copy link

szympajka commented May 31, 2025 •
edited
Loading

Hey!

It looks like clipboard module is being mocked:
Image

Not sure why, but it also affects the "native" storybook copy buttons:

Screen.Recording.2025-05-31.at.16.15.54.mov

Maybe it's affected by SB testing modules?

@shilman shilman added the sev:S2 label May 31, 2025
@ghengeveld ghengeveld self-assigned this Jun 4, 2025
@ghengeveld
Copy link
Member

ghengeveld commented Jun 4, 2025 •
edited
Loading

This seems to be caused by userEvent.setup() which replaces the clipboard API with a stub. userEvent.setup() is called as part of the enhanceContext loader for the core testing functionality.

The real problem here is that the "Copy" functionality from Docs lives in the preview rather than in the manager, and therefore it is affected by any kind of mocking that happens for the story. Your own Button component story is supposed to have this mocking applied, so that it can be tested.

We could consider passing { writeToClipboard: true } to userEvent.setup.

@ghengeveld ghengeveld mentioned this issue Jun 4, 2025
Closed
8 tasks
@ghengeveld
Copy link
Member

I've tried to resolve this by adding writeToClipboard: true and tried it against a fork of the Stackblitz example above, but it doesn't work. It seems we'll have to resort to using a channel event after all. Unfortunately that isn't a trivial change to make.

@ghengeveld ghengeveld mentioned this issue Jun 6, 2025
Merged
8 tasks
@ghengeveld
Copy link
Member

I found a much simpler solution. By using the clipboard from the top frame (window.top) we can avoid the mocked clipboard in the preview. This only works when running in an iframe but that also applies to the channel event solution.

@ghengeveld ghengeveld moved this to In Progress in 9.0 Roadmap Jun 6, 2025
@github-project-automation github-project-automation bot moved this from In Progress to Done in 9.0 Roadmap Jun 6, 2025
@onx2
Copy link
Author

onx2 commented Jun 6, 2025

I found a much simpler solution. By using the clipboard from the top frame (window.top) we can avoid the mocked clipboard in the preview. This only works when running in an iframe but that also applies to the channel event solution.

Thank you for the quick fix!!

@superrover
Copy link

Local copyToClipboard calls inside Storybook still use the preview iframe, which remains sandboxed even after this PR so clipboard writes resolve but the system clipboard isn’t updated. The actual fix would require adding allow="clipboard-write" (or delegating to window.top.clipboard) on the iframe itself to fully restore copy functionality.

@ghengeveld
Copy link
Member

Reopening this because we should find a general solution for clipboard behavior in user components as well.

@ghengeveld ghengeveld reopened this Jun 10, 2025
This was referenced Jun 10, 2025
Merged
Open
@nowherei
Copy link

Hi!
In storybook 9 we also encountered a bug that navigator.clipboard.writeText stopped working. We are really looking forward to solving this issue

@vanessayuenn vanessayuenn moved this from Done to Todo in 9.0 Roadmap Jun 10, 2025
@ghengeveld
Copy link
Member

Yes, I've opened an issue with user-event and also created a workaround to undo the clipboard stub.

@github-project-automation github-project-automation bot moved this from Todo to Done in 9.0 Roadmap Jun 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ghengeveld ghengeveld

Labels
bug sev:S2 upgrade:9.0
Projects
9.0 Roadmap
Status: Done
Milestone
9.0 Stabilization
8 participants
@ghengeveld @shilman @valentinpalkovic @vanessayuenn @nowherei @szympajka @onx2 @superrover