[Bug]: userEvent.keyboard not working in play functions

[JealousGx]

Describe the bug I am facing an issue with the keyboard or type methods of userEvent.

TagsField.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);

  // wait for scripts to load
  await new Promise((resolve) => setTimeout(resolve, 1500));

  const event = canvas.getByLabelText("Included brands", { selector: "input" });
  await userEvent.type(event, " ");

  await new Promise((resolve) => setTimeout(resolve, 1500));
  await userEvent.keyboard("{backspace}{backspace}");
  await userEvent.keyboard("{backspace}");
};

I have this piece of code that plays the story. And I have also modified the functionalities for backspace to something else. Basically, a span is created upon pressing enter and when backspace is pressed, the whole span is removed and this functionality is achieved through javascript and I am also injecting that javascript code into the story as well. It's working fine with locally run webpack with human interaction, but when it's tested on storybook with testing-library, it doesn't seem to be doing its functionality. In fact, {backspace} doesn't remove any character at all.

FYI: I am using Storybook v7.4.3 and @storybook/testing-library v^0.2.1

This functionality was working fine with storybook v6.5.x but after migrating to v7.4.2, it stopped working.

To Reproduce Steps to reproduce the behavior:

1. Write any story that uses the above code.
2. Run the storybook.
3. Go to the story & see the error.

Expected behavior Expected @storybook/testing-library to work fine even after updating the storybook version to 7.4.3

Screenshots If applicable, add screenshots to help explain your problem.

System Please paste the results of npx storybook@latest info here. Environment Info:

    OS: macOS 13.5.2
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.npm-global/bin/yarn
    npm: 9.6.5 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Edge: 117.0.2045.40
    Safari: 16.6
  npmPackages:
    @storybook/addon-actions: ^7.4.3 => 7.4.3 
    @storybook/addon-designs: ^7.0.5 => 7.0.5 
    @storybook/addon-essentials: ^7.4.3 => 7.4.3 
    @storybook/addon-interactions: ^7.4.3 => 7.4.3 
    @storybook/addon-links: ^7.4.3 => 7.4.3 
    @storybook/addon-themes: ^7.4.3 => 7.4.3 
    @storybook/html: ^7.4.3 => 7.4.3 
    @storybook/html-webpack5: ^7.4.3 => 7.4.3 
    @storybook/jest: ^0.2.2 => 0.2.2 
    @storybook/testing-library: ^0.2.1 => 0.2.1

Additional context Add any other context about the problem here.

[valneras]

Hello, I also have issues with userEvent.keyboard after migrating @storybook/testing-library from 0.1.0 to 0.2.2. After rollbacking this package to 0.1.0 it's working properly (and no regression with other storybook 7.4 packages).

0.2.X versions are using @testing-library/user-event v14 which bring breaking changes on keyboard events. More information here: https://github.com/testing-library/user-event/issues/946 Root cause: https://github.com/testing-library/user-event/issues/842#issuecomment-1019528148 They removed "non-standard" or "deprecated" code but it's now impossible for example to do a simple userEvent.keyboard("[Enter]") on a focused element.

According to me it's better to use native standard Javascript instead of those kind of librairies. To trigger an enter key we can do instead:

const event = new KeyboardEvent("keydown", { key: "Enter" });
myElement.dispatchEvent(event);