[BUG] Visible, enabled and stable elements are no longer clickable when dropdown is open in Firefox

[cjohnson]

Context:

• Playwright Version: Microsoft.Playwright.MSTest 1.34.0
• Operating System: Windows
• .NET version: .NET 6.0.16
• Browser: Firefox

Failing tests:

public async Task LinkOutOfViewportShouldBeClickableAfterInteractionWithDropdownAsync()
{
    var pageContent = "";

    pageContent += "<div>";
    pageContent += "<select class='selection'>";
    pageContent += "<option value='ONE'>Option 1</option>";
    pageContent += "<option value='TWO'>Option 2</option>";
    pageContent += "</select>";
    pageContent += "</div>";

    for (int i = 0; i < 100; i++)
    {
        pageContent += "<div>";
        pageContent += "<p>I'm just some text that makes sure that link is not in the viewport!</p>";
        pageContent += "</div>";
    }

    pageContent += "<a href='https://playwright.dev/'>Go to Playwright!</button>";

    await Page.SetContentAsync(pageContent);

    var firstSelect = Page.Locator("div select.selection").First;
    await firstSelect.ClickAsync();
    await firstSelect.SelectOptionAsync("Option 1");

    var gotoPlaywright = Page.Locator("a");
    await gotoPlaywright.ClickAsync();

    await Expect(Page).ToHaveURLAsync("https://playwright.dev/");
}

public async Task DropdownShouldBeCloseableAfterOpenAsync()
{
    var pageContent = "";

    pageContent += "<div>";
    pageContent += "<select class='selection'>";
    pageContent += "<option value='ONE'>Option 1</option>";
    pageContent += "<option value='TWO'>Option 2</option>";
    pageContent += "</select>";
    pageContent += "</div>";

    await Page.SetContentAsync(pageContent);

    var firstSelect = Page.Locator("div select.selection").First;
    await firstSelect.ClickAsync();
    await firstSelect.SelectOptionAsync("Option 1");

    // Close the dropdown
    await firstSelect.ClickAsync();
}

Playwright Logs

Test method LinkOutOfViewportShouldBeClickableAfterInteractionWithDropdownAsync threw exception: 
System.TimeoutException: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for Locator("a")
  locator resolved to <a href="https://playwright.dev/">Go to Playwright!</a>
attempting click action
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
============================================================

Test method DropdownShouldBeCloseableAfterOpenAsync threw exception: 
System.TimeoutException: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for Locator("div select.selection").First
  locator resolved to <select class="selection">…</select>
attempting click action
  waiting for element to be visible, enabled and stable
  element is visible, enabled and stable
  scrolling into view if needed
  done scrolling
  performing click action
============================================================

Extra information

These tests pass on Chromium and WebKit. I also manually tested them, and it works fine for a user. Playwright seems to force a scroll, and the dropdown stays on the screen after scroll. Here is an image of the behavior:

[aslushnikov]

@cjohnson Thank you for the great bug. I can repro on macos; the following hangs on Firefox:

import { test, expect } from "@playwright/test";

test('should work', async ({ page }, testInfo) => {
  await page.setContent(`
    <div>
      <select>
        <option>very long text #1</option>
        <option>very long text #2</option>
        <option>very long text #3</option>
        <option>very long text #4</option>
        <option>very long text #5</option>
      </select>
    </div>
    <div>
      <button>clickme</button>
    </div>
  `);
  await page.click('select');
  await page.click('button');
});