Fire event on Popover close

[slavachernyshev]

In some cases it is useful to know, if popover was closed or not. For example, to reset logic inside PopoverPanel (tabs navigation, etc.). Like close event in Dialog.

<Popover @close="hideHandleFn()">

[slavachernyshev]

For vue part it can be solved with little changes (like currently implemented in Dialog)

packages/@headlessui-vue/src/components/popover/popover.ts

export let Popover = defineComponent({
    ...
    emits: { close: (_close: boolean) => true },
    ...
    setup(props, { emit, attrs, slots }) {
    ...
    let api = {
        ...
        close(focusableElement: HTMLElement | Ref<HTMLElement | null>) {
            ...
            emit('close', false)
        }
        ...
    }
    ...
    }
})

[mustafaucr]

Hi for react you can use that:

export default function MyComponent() {
  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>()

  useEffect(() => {
    if (!popoverElement) {
      {it means panel closed}
    }
  }, [popoverElement])

  return (
      <Popover.Panel ref={setPopoverElement} ...>
        ...
  )
}

[mgtcampbell]

For what it's worth if anyone else is struggling with the same thing, I was able to use a MutationObserver on the Popover DOM element on the data-headlessui-state attribute, which switches between "open" or null in order to tell when the Popover was closed by clicking outside of it.

[Sm4ster]

Since this is not supported yet, a workaround in vue is to put the content of the PopoverPanel into its own component and fire the close event from the beforeUnmount lifecycle hook.

[luveq]

You can use a ref to watch if the PopoverPanel gets closed:

Script tag:

const popoverRef = ref(null)
watch(
  () => popoverRef.value?.el,
  (el) => {
    if (!el) {
      // someHandler() 
    }
  },
)

Template tag:

<Popover>
  <PopoverPanel ref="popoverRef" />
<Popover>