Dialog element is not removed when closed in playwright & firefox environment

[nozaq]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.1.2

What browser are you using?

Firefox with Playwright

• Playwright version: 1.45.1 (the latest version as of this writing)
• Firefox version: 127.0 (the version Playwright 1.45.1 uses)

Reproduction URL

https://github.com/nozaq/headlessui-dialog-poc

README explains how to run PoC code.

Describe your issue

PoC code contains three Playwright test cases and each test case is executed on three different browser, i.e. Chromium, Firefox and Webkit.

1. Show dialog w/ transition. Wait for the dialog element to be visible before closing it (source).
2. Show dialog w/ transition. Wait for the dialog element to be opacity 1.0 before closing it (source).
3. Show dialog w/o transition (source).

Test results are shown below. The issue here is that Test Case 1 fails with Firefox browser.

Test Case	Chromium	Firefox	Webkit
1	PASS	FAIL	PASS
2	PASS	PASS	PASS
3	PASS	PASS	PASS

The test fails because <Dialog> element with transition attribute is not removed from the portal node( <div data-headlessui-portal> node ) after the transition completes, resulting in the page becoming unresponsive since the dialog element remains covering the whole screen. The test case 1 fails at this line with the following error message.

  - expect.toBeHidden with timeout 5000ms
  - waiting for getByRole('dialog')
  -   locator resolved to <div data-open="" data-enter="" role="dialog" tabindex="-1" aria-modal="true" data-transition="" id="headlessui-dialog-:r0:" data-headlessui-state="open" class="fixed inset-0 flex w-screen items-center justify-center bg-black/30 p-4 transition duration-300 ease-out data-[closed]:opacity-0">…</div>
  -   unexpected value "visible"

The test passes when explicitly waiting the opacity of the dialog element to be 1.0 before closing it. This is confirmed by the test case 2.

I wonder if transition does not finish as expected when <Dialog> is closed in the middle of the entering transition from the following reason.

• The difference between test case 1 and 2 is that the later waits until the enter transition finishes while the former not.
• From the error message above, the dialog element still has data-enter attribute when the dialog element is supposed to be unmounted.

Additional Information

• When running the same code manually on Firefox(v127.0.2), I was not able to reproduce the issue.
• This issue could be a duplicate of https://github.com/tailwindlabs/headlessui/issues/3323, but I am not 100% sure if leaving data-enter attribute will prevent the dialog to be unmounted.

Please let me know if any additional information/clarification is needed.

[crissadriana]

Similarly is happening to me with Dialog as well as Combobox listbox - passing tests on Chromium and Webkit, but failing on Firefox

[HendrikGrobler]

This is a pretty serious issue for me, it's actually causing everything to be unclickable when closing a dialog with a backdrop before the animation completes (only in Firefox). Setting transition to false does seem to "fix" it for the time being, but it's not ideal.