fix(browser): cleanup keyboard state

packages/browser/context.d.ts

@@ -59,6 +59,7 @@ export interface UserEvent {
    * @see {@link https://vitest.dev/guide/browser/interactivity-api.html#userevent-setup}
    */
   setup: () => UserEvent
+  cleanup: () => Promise<void>;
   /**
    * Click on an element. Uses provider's API under the hood and supports all its options.
    * @see {@link https://playwright.dev/docs/api/class-locator#locator-click} Playwright API

packages/browser/src/client/tester/context.ts

@@ -38,6 +38,13 @@ export function createUserEvent(__tl_user_event__?: TestingLibraryUserEvent): Us
     setup(options?: any) {
       return createUserEvent(__tl_user_event__?.setup(options))
     },
+    async cleanup() {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        return
+      }
+      await triggerCommand('__vitest_cleanup', keyboard)
+      keyboard.unreleased = []
+    },
     click(element: Element | Locator, options: UserEventClickOptions = {}) {
       return convertToLocator(element).click(processClickOptions(options))
     },

packages/browser/src/client/tester/tester.ts

@@ -11,6 +11,7 @@ import { VitestBrowserClientMocker } from './mocker'
 import { setupExpectDom } from './expect-element'
 
 const cleanupSymbol = Symbol.for('vitest:component-cleanup')
+const userEventCleanupSymbol = Symbol.for('vitest:user-event-cleanup')
 
 const url = new URL(location.href)
 const reloadStart = url.searchParams.get('__reloadStart')
@@ -168,6 +169,9 @@ async function executeTests(method: 'run' | 'collect', files: string[]) {
       if (cleanupSymbol in page) {
         (page[cleanupSymbol] as any)()
       }
+      if (userEventCleanupSymbol in page) {
+        await (page[userEventCleanupSymbol] as any)()
+      }
     }
     catch (error: any) {
       await client.rpc.onUnhandledError({

packages/browser/src/node/commands/index.ts

@@ -4,7 +4,7 @@ import { clear } from './clear'
 import { fill } from './fill'
 import { selectOptions } from './select'
 import { tab } from './tab'
-import { keyboard } from './keyboard'
+import { keyboard, keyboardCleanup } from './keyboard'
 import { dragAndDrop } from './dragAndDrop'
 import { hover } from './hover'
 import { upload } from './upload'
@@ -34,4 +34,5 @@ export default {
   __vitest_selectOptions: selectOptions,
   __vitest_dragAndDrop: dragAndDrop,
   __vitest_hover: hover,
+  __vitest_cleanup: keyboardCleanup,
 }

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

@@ -49,6 +49,19 @@ export const keyboard: UserEventCommand<(text: string, state: KeyboardState) =>
   }
 }
 
+export const keyboardCleanup: UserEventCommand<(state: KeyboardState) => Promise<void>> = async (
+  context,
+  state,
+) => {
+  const { provider, contextId } = context
+  if (provider instanceof PlaywrightBrowserProvider) {
+    const page = provider.getPage(contextId)
+    for (const key of state.unreleased) {
+      await page.keyboard.up(key)
+    }
+  }
+}
+
 export async function keyboardImplementation(
   pressed: Set<string>,
   provider: BrowserProvider,

packages/browser/src/node/plugins/pluginContext.ts

@@ -86,6 +86,7 @@ export const server = {
 export const commands = server.commands
 export const userEvent = createUserEvent(_userEventSetup)
 export { page, cdp }
+page[Symbol.for('vitest:user-event-cleanup')] = () => userEvent.cleanup()
 `
 }
 

test/browser/fixtures/user-event/cleanup1.test.ts

@@ -0,0 +1,30 @@
+import { expect, onTestFinished, test } from 'vitest'
+import { userEvent } from '@vitest/browser/context'
+
+test('cleanup1', async () => {
+  let logs: any[] = [];
+  function handler(e: KeyboardEvent) {
+    logs.push([e.key, e.altKey]);
+  };
+  document.addEventListener('keydown', handler)
+  onTestFinished(() => {
+    document.removeEventListener('keydown', handler);
+  })
+
+  await userEvent.keyboard('{Tab}')
+  // keep alt being pressed, which should be reset
+  // before running cleanup2.test.ts
+  await userEvent.keyboard("{Alt>}")
+  expect(logs).toMatchInlineSnapshot(`
+    [
+      [
+        "Tab",
+        false,
+      ],
+      [
+        "Alt",
+        true,
+      ],
+    ]
+  `)
+})

test/browser/fixtures/user-event/cleanup2.test.ts

@@ -0,0 +1,30 @@
+import { expect, onTestFinished, test } from 'vitest'
+import { userEvent } from '@vitest/browser/context'
+
+// exact same test as cleanup1.test.ts
+
+test('cleanup2', async () => {
+  let logs: any[] = [];
+  function handler(e: KeyboardEvent) {
+    logs.push([e.key, e.altKey]);
+  };
+  document.addEventListener('keydown', handler)
+  onTestFinished(() => {
+    document.removeEventListener('keydown', handler);
+  })
+
+  await userEvent.keyboard('{Tab}')
+  await userEvent.keyboard("{Alt>}")
+  expect(logs).toMatchInlineSnapshot(`
+    [
+      [
+        "Tab",
+        false,
+      ],
+      [
+        "Alt",
+        true,
+      ],
+    ]
+  `)
+})

test/browser/fixtures/user-event/vitest.config.ts

@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+const provider = process.env.PROVIDER || 'playwright'
+const name =
+  process.env.BROWSER || (provider === 'playwright' ? 'chromium' : 'chrome')
+
+export default defineConfig({
+  cacheDir: fileURLToPath(new URL("./node_modules/.vite", import.meta.url)),
+  test: {
+    browser: {
+      enabled: true,
+      provider,
+      name,
+    },
+  },
+})

test/browser/specs/runner.test.ts

@@ -137,3 +137,15 @@ error with a stack
     expect(stderr).toContain('Access denied to "/inaccesible/path".')
   })
 })
+
+test('user-event', async () => {
+  const { ctx } = await runBrowserTests({
+    root: './fixtures/user-event',
+  })
+  expect(Object.fromEntries(ctx.state.getFiles().map(f => [f.name, f.result.state]))).toMatchInlineSnapshot(`
+    {
+      "cleanup1.test.ts": "pass",
+      "cleanup2.test.ts": "pass",
+    }
+  `)
+})