headlessui Popover does not close when clicking anywhere outside of its contents

Hi, I created a minimal repo by initializing Next.js via pnpm create next-app@latest. I added the 'basic example' component from the documentation to the layout.tsx. After opening the popover, the element is selected and you can tab through items but it does not close. If you click outside focus is lost but popover remains open. If you press ESC key while element has focus, the popover closes. If you click outside of the popover then press ESC, nothing happens. The popover is not closing as expected.

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.0

What browser are you using?

Firefox

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways. Unfortunately we can't provide support without a reproduction, and your issue will be closed with no comment if this is not provided.

You can use one of the starting projects on CodeSandbox:

With React and Tailwind CSS: https://codesandbox.io/s/github/tailwindlabs/reproduction-headlessui-react
With Vue and Tailwind CSS: https://codesandbox.io/s/github/tailwindlabs/reproduction-headlessui-vue

Describe your issue

Clone the repo to your computer, install deps pnpm i, run dev server -> pnpm dev. Head over to http://localhost:3000/ the basic popover from the documentation should appear at the top of the page. Click it to open the popover then click outside of the popover to close it. The popover remains open.

Jan 14 '25 01:01 gmreburn

It appears to be as easy to reproduce as this. Normally, you'd use <PopoverGroup /> in the <header />, but it works in the below example as well. If I would move <header /> and <footer /> into <main /> as children (siblings to <PopoverGroup />) it works. On the other hand, if the <PopoverGroup /> is for instance inside <main />: clicking the <header /> or the <footer /> does not dismiss it.

return (
  <body>
    <header className="border border-blue-500">Header</header>
    
    <main className="border border-red-500">
      <PopoverGroup>
        <Popover>
          <PopoverButton>Button 1</PopoverButton>
          <PopoverPanel>Panel 1</PopoverPanel>
        </Popover>
        <Popover>
          <PopoverButton>Button 2</PopoverButton>
          <PopoverPanel>Panel 2</PopoverPanel>
        </Popover>
      </PopoverGroup>
    </main>
    
    <footer className="border border-blue-500">Footer</footer>
  </body>
)

May 28 '25 11:05 Dashice

It appears to be as easy to reproduce as this. Normally, you'd use <PopoverGroup /> in the <header />, but it works in the below example as well. If I would move <header /> and <footer /> into <main /> as children (siblings to <PopoverGroup />) it works. On the other hand, if the <PopoverGroup /> is for instance inside <main />: clicking the <header /> or the <footer /> does not dismiss it.

return (

Header
<main className="border border-red-500">
  <PopoverGroup>
    <Popover>
      <PopoverButton>Button 1</PopoverButton>
      <PopoverPanel>Panel 1</PopoverPanel>
    </Popover>
    <Popover>
      <PopoverButton>Button 2</PopoverButton>
      <PopoverPanel>Panel 2</PopoverPanel>
    </Popover>
  </PopoverGroup>
</main>

<footer className="border border-blue-500">Footer</footer>
)

I've noticed the same issue, where I have the Popover in my

component. It looks like it does not close when clicking on a component that is nested in a sibling component. In your case, if you click anywhere in the "body" component, or in the "main" component it will close. But if you click in either of the "header" or "footer" components, it will not detect it properly, thus not closing the popover.

At least, the above is what I've observed so far. Is this issue present since v2.1, or another version? Any idea on which version can be rollbacked to safely?

Jun 14 '25 14:06 Joostdeboer