[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).

[vursen]

It looks like #31325 is the one who introduced this issue. The problematic part can be found here:

playwright/browser_patches/firefox/patches/bootstrap.diff

Lines 1155 to 1159 in c9ae644

	+ // Playwright: emulate focused page by never bluring when leaving document.
	+ if (XRE_IsContentProcess() && aIsLeavingDocument && docShell && nsDocShell::Cast(docShell)->ShouldOverrideHasFocus()) {
	+ return true;
	+ }
	+

This change essentially traps focus within the page, making Tab no longer trigger blur when pressed on the last element.

One way I found to partially work around the issue is to set firefoxUserPrefs: { 'dom.disable_tab_focus_to_root_element': false }, which allows focus to reach the html element using Shift+Tab. However, this is still different from the expected behavior, where focus should go to the body element.