How to use the Dialog component with headlessui's Transition component in an uncontrolled way?

[paulwongx]

I'm trying to wrap the radixUI dialog primitive and having a very hard time triggering the Transition element on mount and unmount in an uncontrolled way (ie., that doesn't require an external useState.

I know this controlled version works (simplified for this question)...

import { Transition } from '@headlessui/react';
import * as DialogPrimitive from '@radix-ui/react-dialog';

function Controlled () {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger>Button Trigger</Dialog.Trigger>
      <Dialog.Portal forceMount>
        <Transition.Root show={open}>
          <Transition.Child as={Fragment}>
            <DialogPrimitive.Overlay forceMount />
          </Transition.Child>
          <Transition.Child as={Fragment}>
            <Dialog.Content> Content </Dialog.Content>
          </Transition.Child>
        </Transition.Child>
      </Dialog.Portal>
    </Dialog.Root>
  )

But I can't seem to get an uncontrolled version to work.

• In the code below, the transition works on mount because of the appear={true} prop in the Transition.Root which activates the transition on mount. But when unmounting, the transition doesn't occur. I think because show remains true and the Portal simply unmounts without allowing for the Transition to happen.

// Props removed in `Dialog.Root`
// Removed `forceMount` in Dialog.Portal
// appear={true} added in `Transition.Root`
function Uncontrolled () {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Button Trigger</Dialog.Trigger>
      <Dialog.Portal>
        <Transition.Root show={true} appear={true}>
          <Transition.Child as={Fragment}>
            <DialogPrimitive.Overlay forceMount />
          </Transition.Child>
          <Transition.Child as={Fragment}>
            <Dialog.Content> Content </Dialog.Content>
          </Transition.Child>
        </Transition.Child>
      </Dialog.Portal>
    </Dialog.Root>
  )

• Is there a way to extract the [data-state] open and closed attribute from the Dialog.Content into a javascript variable so I can pass it into the Transition.Root, in the show prop? I would do this in a separate component so it's out of sight.
• If not, is there a way to structure the code above to allow the Transition component to trigger the leave transition when unmounting?

[joaom00]

Is there a way to extract the [data-state] open and closed attribute from the Dialog.Content into a javascript variable

Sure you can get data attributes into a javascript variable, but I don't know if it's the best solution 🤔

Why not use CSS animations?

[paulwongx]

That's a good idea... when I try to do it with tailwindcss tho, it doesn't seem to work. In my Dialog.Content I have something like below but it doesn't work. I tried these properties in a div and it works fine. The styles apply but the duration doesn't for some reason

<DialogPrimitive.Content
  forceMount
  className="transform transition-opacity opacity-100 data-[state=open]:opacity-20 duration-1000"
>
// ...

[joaom00]

Radix only supports CSS animations out of the box, so it should be data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut, and forceMount is not necessary

[paulwongx]

Ah I see... okay that's good to know. I didn't realize I couldn't add custom transitions in the way that I was.

In that case, because I'm looking to add some custom fade-ins and fade-outs, my curent best solution is to recreate an open and setOpen state in the wrapped Dialog.Root component and passing it down as context into the Dialog.Content.

Open to other suggestions, but that's the best I got for now...

[benoitgrelard]

Is there a way to extract the [data-state] open and closed attribute from the Dialog.Content into a javascript variable so I can pass it into the Transition.Root, in the show prop?

Yes, by using the controlled API, as you have discovered. That is what it is for. It enables use cases where you need access to the state outside (like JS animations for example).