ComboBox immediately closes on second open when the anchor has a negative gap

[mart-jansink]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

v2.2.0 (latest)

What browser are you using?

Chrome, Safari (Firefox is OK)

Reproduction URL

https://codesandbox.io/p/devbox/blissful-river-22k848?workspaceId=df463712-8b83-4944-ae78-6529fa90b318

Describe your issue

This ComboBox immediately opens when the input is focused upon, by clicking on it. Then close it by clicking somewhere outside the options. Now clicking the input again causes the box to open just for a moment, before automatically closing again.

With a zero or positive gap value for the anchor prop this doesn't happen. The difference is the list of elements returned by event.composedPath() at https://github.com/tailwindlabs/headlessui/blob/d71fb9cd2e12f5a48617b26e6bb3db90b3e07965/packages/%40headlessui-react/src/hooks/use-outside-click.ts#L79-L81 With a negative gap this set just consists of [body, html, document, Window].

Setting the initialClickTarget.current back to null in https://github.com/tailwindlabs/headlessui/blob/d71fb9cd2e12f5a48617b26e6bb3db90b3e07965/packages/%40headlessui-react/src/hooks/use-outside-click.ts#L202-L208 appears to be a fix, but I can't tell if this has any unforeseen consequences.

[dmarkow]

I have no anchor set at all, and I'm running into this same issue. First click it opens fine, click away and click it again, the menu opens and then immediately closes. Click away and click it for a third time and it works. So every other click has the issue.