[🐞] Modal Component (Headlesss) Fails to Close When Competing Transitions/Animations Occur

[Kesmek]

Which package is affected?

Headless Kit

Describe the bug

I want to have a modal transition in (e.g. fade in, slide in, etc.) and also have the button to close the modal have a transition (e.g. background-color change on hover). There is an issue when both the modal and an element inside the modal have a transition where if the inner transition interrupts the modal's transition then the modal will not properly close. The transitions still complete, but the underlying dialog component never gets removed and still blocks all interactions with the rest of the page, with no way to close it.

Better demonstrated in the video, you can see that the backdrop of the modal is never removed, as the modal is never completely closed.

modal-bug.mp4

Reproduction

https://github.com/Kesmek/modal-transition-bug

Steps to reproduce

1. bun create qwik - use empty project
2. bun i -D @qwik-ui/headless
3. bun start
4. Paste code below into src/routes/index.tsx
5. Open modal
6. Close modal
7. Page can no longer be interacted with (modal is still considered open)

Code that fails to close modal:

// src/routes/index.tsx
import { component$, useStyles$ } from "@builder.io/qwik";
import { Modal } from "@qwik-ui/headless";

export default component$(() => {
  useStyles$(`
.modal-trigger {
  background-color: grey;
  transition: background-color 2s;
}

.modal-trigger:hover {
  background-color: green;
}

.modal-panel[data-closing] {
  opacity: 0;
}

.modal-panel {
  opacity: 1;
  transition: opacity 2s;
}
`);

  return (
    <>
      <Modal.Root>
        <Modal.Trigger class="modal-trigger">Open Modal</Modal.Trigger>
        <Modal.Panel class="modal-panel">
          <Modal.Close class="modal-trigger">Close Modal</Modal.Close>
        </Modal.Panel>
      </Modal.Root>
    </>
  );
});

System Info

System:
    OS: Linux 6.11 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 7700 8-Core Processor
    Memory: 19.99 GB / 30.47 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 23.1.0 - /usr/bin/node
    npm: 10.9.0 - /usr/bin/npm
    pnpm: 9.12.3 - /usr/bin/pnpm
    bun: 1.1.34 - ~/.bun/bin/bun
  npmPackages:
    @builder.io/qwik: ^1.9.1 => 1.9.1 
    @builder.io/qwik-city: ^1.9.1 => 1.9.1 
    @qwik-ui/headless: ^0.6.2 => 0.6.2 
    typescript: 5.4.5 => 5.4.5 
    undici: * => 6.20.1 
    vite: 5.3.5 => 5.3.5

Additional Information

The bug does not occur if while pressing the <Modal.Close> component, you keep the mouse completely still.

[VEH9]

@Kesmek hi! I’ve run into exactly the same issue as you described here. I’m wondering - were you able to solve it in the end? If so, could you share how you fixed it?