Transition and TransitionChild do not seems to work with Dialog on latest version

[SebUndefined]

What package within Headless UI are you using?

@headlessui/react 2.2.0
tailwindcss 3.4.17
react 18.3.1

What browser are you using?

Chrome (Brave) Version 1.74.48 Chromium: 132.0.6834.83 (Official Build) (arm64)

Reproduction URL

Code Sandbox

Describe your issue

The Transition and TransitionChild component do not seems to work properly with Dialog (Modal) on the latest version of tailwind with React. I cannot see what's wrong with the code linked maybe something is missing ? I tried with only css as describe here without luck...
We also face some issue with Drawer components as well.

We use a standard slice with redux for controlling a "GlobalModal" but even with a local state, it does not work (see example above).

Does anyone has an idea ?

[SebUndefined]

For info, does not work on Drawer as well. Example bellow is inspired from here

import React, { PropsWithChildren } from 'react'
import {
  Dialog,
  DialogBackdrop,
  DialogPanel,
  TransitionChild,
} from '@headlessui/react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import classNames from 'classnames'

interface StandardDrawerProps extends PropsWithChildren {
  open?: boolean
  setOpen: (v: boolean) => void
  size?: 'sm' | 'lg' | 'full'
}

const StandardDrawer: React.FC<StandardDrawerProps> = ({
  open,
  setOpen,
  children,
  size = 'md',
}) => {
  return (
    <Dialog open={open} onClose={setOpen} className="relative z-10">
      <DialogBackdrop
        transition
        className="fixed inset-0 bg-gray-500/75 dark:bg-slate-900/75 transition-opacity duration-500 ease-in-out data-[closed]:opacity-0"
      />

      <div className="fixed inset-0 overflow-hidden">
        <div className="absolute inset-0 overflow-hidden">
          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
           {/*transition is useless, does not work*/}
            <DialogPanel
              transition
              className={classNames(
                'pointer-events-auto w-screen  transform transition duration-500 ease-in-out data-[closed]:translate-x-full sm:duration-700',
                {
                  'max-w-2xl': size === 'sm',
                  'max-w-2xl md:max-w-screen-md lg:max-w-screen-lg':
                    size === 'md',
                  'max-w-full': size === 'lg',
                }
              )}
            >
              <TransitionChild>
                <div className="absolute left-0 top-0 -ml-8 flex pr-2 pt-4 duration-500 ease-in-out data-[closed]:opacity-0 sm:-ml-10 sm:pr-4">
                  <button
                    type="button"
                    onClick={() => setOpen(false)}
                    className="relative rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
                  >
                    <span className="absolute -inset-2.5" />
                    <span className="sr-only">Close panel</span>
                    <XMarkIcon aria-hidden="true" className="size-6" />
                  </button>
                </div>
              </TransitionChild>
              <div className="flex h-full flex-col overflow-y-scroll bg-white dark:bg-slate-900 shadow-xl">
                {children}
              </div>
            </DialogPanel>
          </div>
        </div>
      </div>
    </Dialog>
  )
}

export default StandardDrawer

[hectordommo]

+1

I have cases where the modal doesn't show when explicitaly defining its open prop == true.

And sometimes it doen't close when the onClose prop is defined.

[RobinMalfait]

Hey!

In this scenario, you want to control the open state by the Transition, this means that you should be able to remove the open prop on the Dialog itself and it will retrieve its state from the Transition component internally.

You can apply the following diff:

diff --git a/src/StandardModal.tsx b/src/StandardModal.tsx
index 9195b03..fa92aff 100644
--- a/src/StandardModal.tsx
+++ b/src/StandardModal.tsx
@@ -19,7 +19,7 @@ const StandardModal: React.FC<StandardModalProps> = ({
 }) => {
   return (
     <Transition show={open}>
-      <Dialog open={open} onClose={onClose} className="relative z-10">
+      <Dialog onClose={onClose} className="relative z-10">
         <TransitionChild
           enter="ease-out duration-1000"
           enterFrom="opacity-0"

Hope this helps!