Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazily resolve default containers in <Dialog> #2697

Merged
merged 2 commits into from
Aug 22, 2023

Conversation

thecrypticace
Copy link
Contributor

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
Copy link

vercel bot commented Aug 22, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Initially clicking on the Dialog component is that it closes
1 participant