Functionality of Popover.Group

[ebuckthal]

trafficstars

Thanks for all the work you've put into this library! Excited to use it and see it grow. 😃

---

I want to use multiple Popovers to build a more complex site navigation header. Some pseudocode:

<script>
   const popover1 = createPopover({});
   const popover2 = createPopover({});
</script>

<button use:popover1.button ... />
<div use:popover1.panel ... />

<button use:popover2.button ... />
<div use:popover2.panel ... />

However, if I first click popover1.button, then click popover2.button (while popover1.panel is still "expanded") it will only close popover1.panel. I must click popover2.button a second time to open popover2.panel.

In headlessui, this action is supported with grouping related popovers (<Popover.Group />).

Is there a way to achieve that functionality?

[CaptainCodeman]

I'll have to have a play around and see what the best way to support that - I'm picturing something a bit like Stripe's top-level nav, is that the right interpretation?

[ebuckthal]

Yes, similar to Stripe's navigation. It would be an added bonus if it could support on-hover as well as on-click!