userEvent.keyboard always releases pressed key with playwright provider

[edoardocavazza]

Describe the bug

I am trying to use the new Interactive API to test the behavior of a button.
It seems that every keyboard command is automatically released even when using the {Enter>} syntax.

Reproduction

https://github.com/edoardocavazza/vitest-keyboard

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 261.33 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 8.6.3 - ~/Library/pnpm/pnpm
    bun: 1.0.30 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.2.1
  npmPackages:
    @vitest/browser: ^2.0.1 => 2.0.1 
    vitest: ^2.0.1 => 2.0.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

Hmm, you are right. It should only be released in userEvent.type:

https://github.com/testing-library/user-event/blob/main/src/utility/type.ts#L40

[sheremet-va]

Interestingly enough, your code also doesn't work with userEvent (you can try preview provider which uses unmodified @testing-library/user-event library).

[edoardocavazza]

Hi @sheremet-va, thanks for the fix!
I have investigated why the second part of the test wont work even with the original user-event library.
I have found out that using the direct api (e.g. userEvent.keyboard()) will create a new context for each call, so it loses the pressed keys state.

It works as expected when using the setup() method:

const device = userEvent.setup();
await userEvent.keyboard('{Enter>}');
// triggers the keyup event
await userEvent.keyboard('{Enter/}');

Any plan to support the setup method?

[edoardocavazza]

Alternatively, IMHO it would be better if vitest kept the state of pressed keys. Since the interaction using playwright/webdriver is not emulated, the key actually reamains unreleased forever 😅

[sheremet-va]

Interesting! I didn't know how userEvent keeps this under the hood, but it might be hard to replicate this specific behavior since it's done server side (maybe we can return the state somehow).

I agree it should work more like userEvent.setup().keyboard()

Any plan to support the setup method?

Currently setup just returns the same userEvent, not sure how we can support it fully and if we really need to.

[sheremet-va]

I think what happens with .setup is that this line is called:

https://github.com/testing-library/user-event/blob/d0362796a33c2d39713998f82ae309020c37b385/src/keyboard/index.ts#L30

In Vitest currently it's scoped to the same keyboard call:

vitest/packages/browser/src/node/commands/keyboard.ts

Line 76 in 99a12ae

if (pressed.has(key)) {