tailwindlabs/headlessui

Dialog closes on first open even when clicked inside the panel

leolorenzoluis opened this issue · 11 comments

leolorenzoluis commented

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 commented

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 commented

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

RobinMalfait commented

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 commented

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 commented

@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:

image

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 commented

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?