Immediate close of an open lightbox with escape button leaves portal in DOM

[amalitsky]

Describe the bug

I'm writing Playwright test for the updated lightbox and came across a situation when closing lightbox with escape button causes portal to stay in the DOM with portal_closed class attached.

Simplified test code:

lightboxOverlay = page.locator(LightboxSelector.host);

await expect(lightboxOverlay).toBeVisible();

await page.keyboard.press('Escape');

await expect(lightboxOverlay).toBeHidden();

Test fails, because lightboxOverlay remains in a visible state.

Once this happens, portal stays in the DOM with portal_closed class attached for at least 30 seconds. No exceptions in DevTools console. Adding wait after await page.keyboard.press('Escape') doesn't help, while adding wait before it does solve the problem.

As a side note - by playwright's standards opacity: 0 is considered a visible state. Hence changing assertion to await lightboxOverlay.waitFor({ state: 'hidden' }) doesn't work either.

There seems to be a race condition between react useEffect and promise-based cleanup hooks, but I couldn't pin point the actual problem.

Also I doubt this can be observed by a normal user, only test automation can catch it.

Expected behavior

Expected behavior is for portal to get removed from the DOM after having portal_closed class for a split second.

Test closing portal with a Close button click works just fine:

lightboxOverlay = page.locator(LightboxSelector.host);

await expect(lightboxOverlay).toBeVisible();

const closeButton = lightboxOverlay.locator(LightboxSelector.closeButton);

await closeButton.click();

await expect(lightboxOverlay).toBeHidden();

I assume this is because PW uses additional checks for a clickable element, which lead to additional wait seemingly preventing race condition from happening.

How to reproduce

I'll look for options to have an online PW test sandbox.

I don't think end user will ever face this situation.

Screenshots / Logs

Terminal state of the failing state.

Additional context

This bug could be caused by the way my application is built and bootstrapped.
Also, PW tests are prone to race-conditions which are hard to debug.