Manually opening Popover/Dropdown Menu/Dialog/etc

[mrlubos]

Hey! I would like to manually/programmatically trigger the open event on any components that can be open. This use case is not mentioned in the documentation, which leads me to believe it is not explicitly supported and any successful implementation is a byproduct of the current architecture.

My current approach consists of passing ref to my component, e.g. <PopoverButton>. Later, I trigger the click event on it through ref.current.click(). This works, but only sometimes. It is very hard to debug the current behaviour and determine why it fails. For example, if I grab the same button by its ID using document.getElementById() and call element.click(), I can see the popover menu opens for a split second, but then it immediately closes.

Is this the intended behaviour? Should I file a bug?

EDIT: allowing to control the open state through props would also work

[Muetze42]

I would like to have a popover just like in the Docs. In other words, open when loaded:
https://headlessui.com/v1/vue/popover

Unfortunately, the docs are not public or I have not found them.

[nuschk]

Same here. The best I've come up with currently is using static:

  const [open, setOpen] = React.useState(false);
  return (
    <Headless.Popover as={React.Fragment}>
      <Headless.PopoverButton onClick={() => setOpen((old) => !old)}>Open</Headless.PopoverButton>
      <Headless.Transition show={open}>
        <Headless.PopoverPanel anchor="bottom start" static>
          Hi there!
        </Headless.PopoverPanel>
      </Headless.Transition>
    </Headless.Popover>
  );

The downside is you now have to manually do the backdrop clicks and escape pressed, too, which kind of defeats the purpose of using the component at all. :-(