expose events for popover

[naivefun]

Is there a way to know the popover is closed?

The scenario is nested view, when element inside is clicked, the outside popover will not be closed since the button are actually nested.

[itsjms]

We need this so badly! Have you found a work around?

[itsjms]

Here is a work-around for a custom component that wraps popover and manually determines open/closed state which you can use to emit events if needed (sort of annoying to have to do all this, but it works):

<template>
  <Popover>
    <!-- Button -->
    <button @click="togglePanel">
      <slot name="button"></slot>
    </button>
    <!-- Panel -->
    <div v-if="panelOpen">
      <PopoverPanel static>
        <slot name="panelContent"></slot>
      </PopoverPanel>
    </div>
  </Popover>
</template>

<script>
import {
  Popover,
  PopoverPanel
} from '@headlessui/vue'

export default {
  components: {
    Popover,
    PopoverPanel
  },
  data() {
    return {
      panelOpen: false
    }
  },
  methods: {
    togglePanel() {
      document.body.removeEventListener('click', this.clickHandler);
      this.panelOpen = !this.panelOpen
      document.body.addEventListener('click', this.clickHandler);
    },
    clickHandler(event) {
      if (!this.$el.contains(event.target) && this.panelOpen) {
        this.panelOpen = false
        document.body.removeEventListener('click', this.clickHandler);
      }
    }
  },
  beforeDestroy () {
    document.body.removeEventListener('click', this.clickHandler);
  }
}
</script>