Warning in console when using more than one Popover.Button inside Popover.Panel

[twittkopf]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.7

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/gracious-sinoussi-nlzl6e?file=/src/App.js

Describe your issue

When using more than one <Popover.Button /> inside <Popover.Panel /> to close the panel after click, I see the following warning in the console:

You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported.

Since using multiple <Popover.Button /> inside <Popover.Panel /> is a supported use case according to the docs, this seems to be an error. I'd expect the warning is only shown when using more than one <Popover.Button /> outside of <Popover.Panel /> because that use case is not supported.

After a check-in in Discord, it appears the current behaviour is indeed not as intended.

Related GitHub Discussion Thread

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #2146, and will be available in the next release.

You can already try it (in a few minutes) using npm install @headlessui/react@insiders.

[michaelcais]

This false positive warning of multiple <Popover.Button> is happening again in @headlessui/[email protected]. I reverted back to previous version @headlessui/[email protected] and the warning disappears. All my app's <Popover.Button> components are inside a <Popover.Panel>.

[RobinMalfait]

@michaelcais thank you, I'll take care of that!

[RobinMalfait]

@michaelcais Sorry about that!

This should be fixed by #2333, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.