Lazily resolve default containers in <Dialog>

[thecrypticace]

In the <Dialog> component if you had a simple dialog with just a panel but no title — and it defaulted to open on initial render — clicking inside the dialog would close it.

Basically, clicking the <p> tag inside this component would close the dialog:

export default function MyDialog() {
  const [isOpen, setIsOpen] = useState(true)
  return (
    <Dialog
      open={isOpen}
      onClose={() => setIsOpen(false)}
    >
      <Dialog.Panel>
        <p>
          My content
        </p>
      </Dialog.Panel>
    </Dialog>
  )
}

While being open on initial render isn't super common this can pop up if you're conditionally mounting the dialog by doing something like isOpen && (<Dialog>…</Dialog>).

The current implementation reads refs on render to determine the "root" container that contains the dialog. However, this didn't work for initial render because the Portal wasn't yet mounted to the DOM. This PR fixes this problem by lazily resolving the containers at the time an outside click is determined.

Fixes #2694

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2023 3:53pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2023 3:53pm