<Dialog> won't open when unmount is set to false

[spacecat]

What package within Headless UI are you using? "@headlessui/react": "0.0.0-insiders.fbad6a9",

What browser are you using? Chrome Version 126.0.6478.127 (Official Build) (arm64)

Reproduction URL

https://github.com/spacecat/headless-ui-dialog-unmount

Describe your issue

1. Follow the docs here: https://headlessui.com/react/dialog
2. Add a basic dialog with a backdrop and transitions
3. Add unmount={false} to the <Dialog> component
4. The dialog will not open when you add unmount={false} to the <Dialog> component

If you comment out transition on both the <DialogBackdrop> and <DialogPanel> while keeping unmount={false} on <Dialog>, the dialog will start working again when you click the button.

[RobinMalfait]

This should be fixed by #3352, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

[spacecat]

Awesome, thanks @RobinMalfait , will try it out ASAP. :)

[spacecat]

I can confirm that the fix from #3352 now works.

I'm using: "@headlessui/react": "0.0.0-insiders.990b179",

And my markup looks like this:

        <button
          type="button"
          className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          onClick={() => setIsOpen(true)}
        >
          Open Dialog
        </button>
        <Dialog
          open={isOpen}
          onClose={() => setIsOpen(false)}
          className="relative z-50"
          unmount={false}
        >
          <DialogBackdrop
            transition
            className="fixed inset-0 bg-black/30 duration-300 ease-out data-[closed]:opacity-0"
          />
          <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
            <DialogPanel
              transition
              className="max-w-lg space-y-4 bg-white p-12 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0"
            >
              <DialogTitle className="font-bold">
                Deactivate account
              </DialogTitle>
              <Description>
                This will permanently deactivate your account
              </Description>
              <p>
                Are you sure you want to deactivate your account? All of your
                data will be permanently removed.
              </p>
              <div className="flex gap-4">
                <button onClick={() => setIsOpen(false)}>Cancel</button>
                <button onClick={() => setIsOpen(false)}>Deactivate</button>
              </div>
            </DialogPanel>

Also, I updated the repo.