[Bug]: Non-Standard Focus Navigation Behavior in Playwright Browsers

[Aswathprabhu]

Version

@playwright/experimental-ct-react: "1.46.1"

Steps to reproduce

• Clone my repo at https://github.com/Aswathprabhu/playwright-demo
• Run npm install
• Run npx playwright install
• Run npx playwright install-deps
• Run npm run test-ct

Expected behavior

I wrote a simple test that mounts a component rendering an input element and a button.

The expected behavior is as follows:

• Pressing the "Tab" key should focus the input field and verify it is focused.
• Pressing "Tab" again should focus the button and verify it is focused.
• Pressing "Tab" once more should move the focus away from the button, verifying that the focus is now on the body of the page. Normally, after the last focusable element, the focus should return to the body.

Actual behavior

The test case fails in all three browsers (Chromium, WebKit-Mobile and Firefox). In the test, the input field and button correctly receive focus when the "Tab" key is pressed. However, the expected behavior of moving the focus to the body of the page after the button is not occurring. Instead, there is a timeout, failing to transition as anticipated.

Additional context

ScreenShot:

Environment

System:
    OS: macOS 14.5
  Binaries:
    Node: 22.1.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.7.0 - /opt/homebrew/bin/npm
    pnpm: 9.6.0 - /usr/local/bin/pnpm
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/experimental-ct-react: ^1.46.1 => 1.46.1

[cscheffauer]

+1, also facing this!

[dominiccarrington]

I have encountered the same issue on a Mac. I haven't encounted the issue on Linux.

It appears like the combobox at the top of chrome remains in a "focused" state even though the browser is tabbing through the page. Here is a recording of the headed version of the test running:
https://github.com/user-attachments/assets/5494a31e-e17c-4748-838c-2be94a5b78d4

The combobox remains in a focused state while tabbing through the content. When it reachs the end of the tabbable content, the combobox should be next in the tab order however it skips over it and lands on Button One, while unfocusing the combobox.

A similar issue appears to be happening on Firefox as well. Edge has the same issue as above but since the focus as somewhere else to go in the Edge combobox before the page content, tests don't fail.

Playwright version: "@playwright/test": "1.48.1"

GitHub Repo: https://github.com/dominiccarrington/playwright-issue

1. Run npm install
2. Run npx playwright install
3. In a seperate terminal, run: npm run dev
4. Run npx playwright test --project=chromium --headed
5. Run npx playwright test --project=firefox --headed

Environment:

  System:
    OS: macOS 15.0.1
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.9.0/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
    pnpm: 9.12.2 - ~/.nvm/versions/node/v22.9.0/bin/pnpm
  IDEs:
    VSCode: 1.94.2 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: ^1.48.1 => 1.48.1 

[web-padawan]

Any update on this issue? We are still experiencing problems with focusout event not being fired on Tab as reported in #32339. With 1.48.2 this happens both on Mac OS and Linux but only in Firefox (in WebKit our relevant tests pass).