Storybook Interactions File upload causes dialog to open

js4nwp54  于 4个月前  发布在  其他
关注(0)|答案(1)|浏览(68)

描述bug

在使用storybook和@storybook/addon-interactions时,一个userEvent.upload(<element>, file)会导致文件上传对话框出现,尽管交互已经成功上传了文件。

重现

重现仓库:https://github.com/ice1080/storybook-upload-issue-repro
(见下文为什么我无法发布该仓库)

系统

$ npx sb@next info

Environment Info:

  System:
    OS: Linux 5.16 Pop!_OS 21.10
    CPU: (20) x64 Intel(R) Core(TM) i9-10850K CPU @ 3.60GHz
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 8.5.1 - ~/.nvm/versions/node/v12.18.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.84
    Firefox: 98.0.2
  npmPackages:
    @storybook/addon-actions: ^6.4.9 => 6.4.9 
    @storybook/addon-essentials: ^6.4.9 => 6.4.9 
    @storybook/addon-interactions: ^6.4.19 => 6.4.19 
    @storybook/addon-links: ^6.4.9 => 6.4.9 
    @storybook/builder-webpack5: ^6.4.9 => 6.4.9 
    @storybook/manager-webpack5: ^6.4.9 => 6.4.9 
    @storybook/react: ^6.4.9 => 6.4.9 
    @storybook/testing-library: ^0.0.9 => 0.0.9

额外的上下文

查看此问题的方法:
在上面的重现仓库中运行storybook。
点击“测试输入”故事,等待两秒钟,打开文件对话框,即使故事中的文件已成功上传到输入中。这会导致故事中的其他交互被隐藏。
请注意,这只发生在用户从不同故事中手动点击故事时。如果更改组件或故事并刷新该故事,则不会出现此行为。
预期的行为:
文件上传成功地将文件设置在输入上,而不会打开手动选择对话框。
附注:
我尝试使用如何重现中描述的步骤发布该仓库,严格按照说明操作,并在运行npx chromatic命令时遇到了这个错误:

sh: 1: chroma: not found

并且chroma的apt版本是一个与要运行的命令无关的游戏。

相关问题