Clicks outside a dialog can trigger elements "behind" the dialog backdrop

What package within Headless UI are you using? @headlessui/react

What version of that package are you using? v1.6.4

What browser are you using? Reproducible in Chrome on Android and Chrome in Touch Device mode

Reproduction URL https://kui8lz.csb.app/

Describe your issue

The dialog will immediately reopen if you click the toggle button as you can see in this video.

This only happens in a specific configuration:

1. The toggle button is visible while the dialog is open.
2. You tap on the toggle button while the dialog is open.
3. The touchup event happens after the out transition finished. So you either have a fast transition or you tap slowly.
   • the outside-click is handled outside of React callbacks, which is why React does a rerender in the closed state before calling the toggle button. This makes the toggle button open the dialog again.

I would expect either

• the outside click captures the event and my listener on the toggle button is not called OR
• the toggle button receives the event while still in the open state

Possible fixes

• We add event.preventDefault() here this would be my preferred solution, because it emphasizes the “modal” aspect
  • We make this behavior optIn by adding a prop such as captureCloseEvent: boolean
• We pass the event to the onClose function so the lib use can decide what to do
• We use the return value of onClose to decide whether to call preventDefault or not

If you tell me which fix you prefer, I’ll be happy to make a PR.

---

Thanks for the good work! 🥳

[RobinMalfait]

Awesome that it works!

We switched back to a click listener (which completes on keyup). This will be included in the next release. Thanks for testing it out!

[fer-ri]

Awesome that it works!

We switched back to a click listener (which completes on keyup). This will be included in the next release. Thanks for testing it out!

Hi, may I know ETA for the next release?

Thanks