How to close headlessui-vue Popover from code

user_6382534 0
Viewed 2328

I have a vue component that shows a popover with some content using the headlessui for vue and I want to close it when I click on the content. I have read the headlessui/vue docs for manually handling the opening and closing of a Popover which states:

If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can pass a static prop to the PopoverPanel to tell it to always render, and then use the open slot prop to control when the panel is shown/hidden yourself.

I have:

<Popover v-slot="{ open }">
    <PopoverButton>
    </PopoverButton>
    <div v-if="open">
        <PopoverPanel static>
        </PopoverPanel>
    </div>
</Popover>

and it works so far but I want to close the Popover when I click the some content inside it, essentially I want to know how I can access that "open" in my script. I'm quite new to vue so maybe I'm missing something simple.

vuejs3 tailwind-css
1 Answers

One workaround would be to manually click the PopoverButton inside of the panel.

Here's an example how that could work in React:

const buttonRef = useRef();

<Popover>
  <Popover.Button ref={buttonRef}>Click me</Popover.Button>
  <Popover.Panel>
    <button onClick={() => buttonRef.current?.click()}>Content</button>
  </Popover.Panel>
</Popover>
user_41495750
Related