Manually opening Popover component

[carstensbix]

Hi i run an e-commerce, and im not able to open the popover from the outside when a person clicks the "Add to Cart" button. Only way i can achieve this is through a hacky method using useRef, which ultimately also might slow performance of site. Isn't there a way i can open the popover from an outside component?

Have also reported the issue here: https://stackoverflow.com/questions/74769929/how-to-open-popover-manually-headless-ui/74770030#74770030

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

Right now the Popover component can only be opened via the corresponding Popover.Button. We don't have an API right now to open it programatically.

If you really want to do it programmatically, then you can attach a ref to it and open it manually.

which ultimately also might slow performance of site

Did you actually measure this? Why do you think this would slow down performance?

[sstackus]

If you really want to do it programmatically, then you can attach a ref to it and open it manually.

Really interested in how to do this. Is there a mutation observer on one of the attributes that can be triggered? Although even that would call for a shower afterwards.

<div data-headlessui-state="open" data-open="">
  <a aria-expanded="true" data-headlessui-state="open active" id="headlessui-popover-button-:Rr6dtt7:" data-open="" data-active="" aria-controls="headlessui-popover-panel-:R1b6dtt7:" />
  <button id="headlessui-focus-sentinel-:Rr6dtt7H1:" data-headlessui-focus-guard="true" aria-hidden="true" />
</div>