Dialog closes on first open even when clicked inside the panel

[leolorenzoluis]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.17.15

What browser are you using?

Chrome and Safari

Describe your issue

Dialog bug does not occur in 1.7.2 but with 1.7.15 it closes the dialog. When I put a breakpoint what's causing the modal closure... the useClickOutside is getting triggered the first time, so not sure if any succeeding updates between versions broke something.

[catdoglt]

Facing the same issue, had to downgrade the previous version. How did you find out that useClickOutside is getting triggered? Where is that hook, I cant even find it

[howard86]

I've got the same issue and downgrading to 1.7.11 seems to fix

[RobinMalfait]

Hey, thank you for this bug report! 🙏

Unfortunately, I have to close this as a reproduction was not provided. Trying to create a reproduction ourselves from the information in an issue drastically increases the amount of time it takes for us to provide a solution and if we have do that for every issue it’s impossible for us to keep up.

If this is still an issue for you, please open a new issue but include a proper reproduction GitHub repository or CodeSandbox where you already have everything all set up so we can clone it and immediately see the issue without configuring everything by hand.

Sorry, not trying to be dismissive and definitely want to fix the issue if there is one, but we have to be strict about this one or there's no way we could keep up with the number of questions we get and the quality of the library would suffer as a result. Hope that's understandable!

[leolorenzoluis]

Lol, it hasn’t even been 24 hours and yet you already closed the issue. Basically no chance to edit the issue as a first timer to report an issue before closing. 😵‍💫 this feels like a very toxic culture 🙈

[adamwathan]

@leolorenzoluis Hey! Sorry for any surprises here, we try to be very clear in the issue template about what is required when opening an issue, and we explain that issues that don't provide all of the necessary information will be closed:

That's the only way we've found it's possible to effectively manage busy projects like this with a small team. More than happy to help but need to set the bar for detail at a certain level or things would get out of control here.

[lukasvice]

I also have this problem and have created a reproduction.

I have two examples: One that works and one where you can test the bug by opening the dialog for the first time and clicking inside, it closes.

I have found 3 things that need to be met to reproduce this behavior:

1. Version 1.7.15+
2. The Dialog must be opened with a JSX condition and not with the open prop
3. (And this is the weird part:) No Dialog.Title

Working: https://codesandbox.io/s/dialog-working-6wxrfc?file=/src/App.tsx
Bug: https://codesandbox.io/s/dialog-closing-on-first-click-vx4ftt

Could you reopen this issue?

[jorgebastida]

I have this same issue with 1.7.15. Any click inside or outside the Dialog.Panel closes it. Adding a Dialog.Title fixes the issue.

In my case, contrary to @lukasvice 2nd condition, my Dialog is opened with the open prop.

Thank you very much for the hint @lukasvice about the Dialog.Title you saved my day!

@adamwathan Please reconsider reopening this issue.

[daiveedb]

I had the same issue with 1.7.17 . Any click inside or outside the Dialog.Panel closes it. Adding a Dialog.Title fixes the issue.

[IanPhilips]

Seeing this issue as well with any version above 1.7.11 on mobile safari. Adding a Dialog.Title doesn't fix it in my case, this could be because I'm using Transition divs.

[Emiliano-Bucci]

@adamwathan The issue is still present here!

[adamwathan]

@Emiliano-Bucci Yep it's been fixed just need to tag a release 👍

#2800 (comment)

[optislav]

Still present

[nick-tw]

Issue is still present.

[adamwathan]

Please open a new issue with a reproduction if you're still running into this problem 👍

[abhishekmulik]

I am on version v-1.7.18 and the issue is still present. Irrespective where you click inside or outside the Dialog.Panel it closes.

[jeremy0x]

As @leolorenzoluis pointed out, the useClickOutside function is triggered initially. Here’s a simple solution to this problem:

1. Prevent the dialog from closing when clicked outside. You can make the onClose event do nothing and instead:

<Dialog open={isOpen} onClose={() => {}}>

If you want the dialog to close when you click outside it, proceed with the next steps:

2. Add an overlay to your dialog using <Dialog.Overlay />.

3. Close the dialog when the overlay is clicked by adding an onClick event handler to the Dialog.Overlay:

<Dialog.Overlay onClick={() => closeModal()} />

• Here’s how you can define the closeModal function:

const closeModal = () => {
  setIsOpen(false);
};

Hope that helps!

[alexis-jonuro]

still present. I have to downgrade to "1.7.11"

[halilhanbadem]

The problem still continues. I had to downgrade to solve the problem (1.7.11). To summarize the problem, click anywhere inside the panel and you will see that the panel is closed. This is not normal behavior. The normal thing is that it closes on any area clicked outside.

[abhishekmulik]

One of the issue could be the component that is opening the Dialog or it's parent is getting re-rendered this was the issue I faced and eventually my Dialog got closed whenever I clicked inside the Panel

[Aravinda93]

@lukasvice @leolorenzoluis

I am facing similar issue when I access DialogPanel2.vue via DialogPanel1.vue then it for some reason automatically closes the DialogPanel1.vue.

Issue recreation: Codesandbox
Issue posting: #3199

Can you please once have a look and provide some suggestions or workarounds?