[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:
testing-library/user-event#946
Root cause: testing-library/user-event#842 (comment)
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);