[Bug]: right-clicking breaks following clicks on webkit

[nstepien]

Version

1.58.2

Steps to reproduce

1. clone my repo: https://github.com/nstepien/playwright-bugs
2. npm ci
3. npm test rightclick

Expected behavior

The test should pass.
After right clicking, left clicking somewhere on the page should close the context menu

Actual behavior

After the right click, the following left click does not work, breaking the test.

Additional context

• Chromium:
  • right clicking opens the context menu with headless: false
  • after right clicking,
    • programmatically left clicking works, but does not close the context menu 👎
    • programmatically pressing Escape does not close the context menu either 👎
• Firefox:
  • right clicking opens the context menu with headless: false
  • after right clicking,
    • programmatically left clicking works and closes the context menu 👍
    • programmatically pressing Escape closes the context menu 👍
• WebKit:
  • right clicking opens the context menu even with headless: true 👎👎👎
  • after right clicking,
    • programmatically left clicking does not work 👎, and does not close the context menu 👎
    • programmatically pressing Escape does not close the context menu either 👎

Seems like Firefox behaves correctly in this instance.
It would definitely be nice if Chrome and WebKit behaved like Firefox in this instance! 🙏
Not sure if this is an issue with Playwright itself or the browsers.

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (32) x64 AMD Ryzen 9 9950X3D 16-Core Processor
    Memory: 36.82 GB / 63.58 GB
  Binaries:
    Node: 25.6.1 - C:\Program Files\nodejs\node.EXE
    npm: 11.7.0 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.109.2 - C:\Users\Stepi\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  npmPackages:
    @playwright/test: ^1.58.2 => 1.58.2

[Skn0tt]

I'm not sure what's going on in tabbing.spec.ts, but I understand that you're surprised that rightclick.spec.ts behaves differently across browsers. I notice that the right click opens a visible context menu on my macOS, even though the browser is in headless mode. Here's a minimal version of the test, which fails only on WebKit:

test("right click", async ({ page }) => {
  await page.setContent(`
    <button>Click me</button>
    <script>
      const button = document.querySelector("button");
      button.addEventListener("click", () => {
        button.textContent = "Clicked!";
      });
    </script>
  `);
  await page.getByRole('button').click({ button: "right" });
  await page.getByRole('button').click();
  await expect(page.getByRole("button")).toHaveText("Clicked!");
});

@yury-s could you take a look?

[nstepien]

I'm not sure what's going on in tabbing.spec.ts

That's for a separate issue I'll open soon, you can ignore tabbing.spec.ts for this issue.