It seems that in v2 the Popover will auto-close if the PopoverButton is not visible any more.
In @prtmwrkr's example (#3271) this happened because it only becomes visible on hover, but then when moving the mouse inside the PopoverPanel, the row is not hovered any more, causing the button to be hidden, and the Popover to close itself.
I have the same problem (see codesandbox above), where in v1, I had a Transition that would hide the button offscreen when the Popover is open and animate it back in once closed. But now in v2, as soon as the animation finishes to hide it, the Popover closes itself.
So a workaround is to make sure the PopoverButton is always visible on screen. This was not a requirement in v1, and animating or hiding the button, worked as expected. But not any more in v2.
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v2.0.4
What browser are you using?
Chrome
Reproduction URL
https://codesandbox.io/p/devbox/headless-popover-v2-forked-m245fd?file=%2Fsrc%2FApp.jsx%3A51%2C43
Describe your issue
New issue similar to #3271:
It seems that in v2 the
Popover
will auto-close if thePopoverButton
is not visible any more.In @prtmwrkr's example (#3271) this happened because it only becomes visible on hover, but then when moving the mouse inside the
PopoverPanel
, the row is not hovered any more, causing the button to be hidden, and thePopover
to close itself.I have the same problem (see codesandbox above), where in v1, I had a
Transition
that would hide the button offscreen when thePopover
is open and animate it back in once closed. But now in v2, as soon as the animation finishes to hide it, thePopover
closes itself.So a workaround is to make sure the
PopoverButton
is always visible on screen. This was not a requirement in v1, and animating or hiding the button, worked as expected. But not any more in v2.