How to use Transition component in Uncontrolled @radix-ui Dialog

[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 structure the code above to allow the Transition component to trigger the leave transition when unmounting?
• If not, the Dialog.Content component has a [data-state] attribute of open and closed. Is there a way to extract that attribute into a javascript variable so I can pass it into the Transition.Root, in the show prop?

[natac13]

I not sure you will be able to handle this in a uncontrolled way as Radix-ui does not have a open renderProp like headlessui does.
I think you would have to do a controlled version like the following