Possible bug: Dialog click outside won't work if nested

[osddeitf]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

Chrome

Describe your issue

I created a custom Modal component with Tailwindcss:

import { PropsWithChildren } from 'react'
import { Dialog } from '@headlessui/react'

interface ModalProps {
  open: boolean
  onClose: () => void
}

export default function Modal(props: PropsWithChildren<ModalProps>) {
  const { open, onClose, children } = props

  return (
    <Dialog open={open} onClose={onClose}>
      {open && (
        <>
          {/* The backdrop, rendered as a fixed sibling to the panel container */}
          <div className="fixed inset-0 bg-black/30" aria-hidden="true" />

          {/* Full-screen container to center the panel */}
          <div className="fixed inset-0 flex items-center justify-center">
            {/* The actual dialog panel. TODO: custom width, height */}
            <Dialog.Panel className="mx-auto w-full max-w-lg rounded overflow-hidden">
              <div className='overflow-auto max-h-screen md:max-h-[80vh] bg-white'>
                {children}
              </div>
            </Dialog.Panel>
          </div>
        </>
      )}
    </Dialog>
  )
}

Then tried something like this:

<Modal open={open} onClose={() => setOpen(false)}>
  <div className='w-64 h-32 bg-white'/>
  <Modal open={false} onClose={() => {}} />
</Modal>

Problem: click outside the modal won't close it. The nested modal (if opened) can still click outside to close.
I think it because the click outside events are conflicted somehow.

[shasank2]

Here is what i did.. Wrapped your dialog with a Transition and passed your open state to its show prop.

  <Transition appear show={open} as={Fragment}>
    <Dialog onClose={onClose}>
        <>
          <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
          <div className="fixed inset-0 flex items-center justify-center">
            <Dialog.Panel className="mx-auto w-full max-w-lg rounded overflow-hidden">
              <div className='overflow-auto max-h-screen md:max-h-[80vh] bg-white'>
                {children}
              </div>
            </Dialog.Panel>
          </div>
        </>
    </Dialog>
  </Transition>

[thecrypticace]

Hey! Thank you for your bug report!
Much appreciated! 🙏

The problem here was that we were not accounting for nested dialogs that were closed — but instead only ones that were unmounted.

This has been fixed by #1667, and will be available in the next release.

You can try it by using our insiders build:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[osddeitf]

@thecrypticace I tried the new package and saw it fixed now. Thank you for your hard work.