Popover does not close when clicking anywhere outside of its contents

[gmreburn]

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.