CODEWITHSUNDEEP
vuejs3tailwind-css
Edgar
Edgar

Reputation: 552

How to close headlessui-vue Popover from code

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.

Upvotes: 6

Views: 4947

Answers (2)

Lovely Fellow
Lovely Fellow

Reputation: 41

Here is the code that I'm using in Vue3. Can use a close slot to make a close button inside content.

<script setup>
  import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
</script>
<template>
  <Popover>
    <PopoverButton>Open/Close out of Content</PopoverButton>
    <PopoverPanel v-slot="{ close }">
      <button @click="close">Close Button in Content</button>
    </PopoverPanel>
  </Popover>
</template>

Upvotes: 4

glennreyes
glennreyes

Reputation: 2349

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>

Upvotes: 14

Related Questions