From e9f0224b919445260d3b19511420a3fd448e4ea7 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Wed, 26 Oct 2022 11:57:13 +0200
Subject: [PATCH] fix(Popover): avoid crash on mount if ref not loaded (#105)

---
 src/runtime/components/elements/Dropdown.vue | 4 +++-
 src/runtime/components/overlays/Popover.vue  | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/elements/Dropdown.vue b/src/runtime/components/elements/Dropdown.vue
index f33eb6e1..68cce5e4 100644
--- a/src/runtime/components/elements/Dropdown.vue
+++ b/src/runtime/components/elements/Dropdown.vue
@@ -154,7 +154,9 @@ function onItemClick (e, item: any) {
   }
 }
 
+// https://github.com/tailwindlabs/headlessui/blob/f66f4926c489fc15289d528294c23a3dc2aee7b1/packages/%40headlessui-vue/src/components/menu/menu.ts#L131
 const menuApi: Ref<any> = ref(null)
+
 let openTimeout: NodeJS.Timeout | null = null
 let closeTimeout: NodeJS.Timeout | null = null
 
@@ -167,7 +169,7 @@ onMounted(() => {
     const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides)
     menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]]
     // stop trigger click propagation on hover
-    menuApi.value?.buttonRef.addEventListener('click', (e: Event) => {
+    menuApi.value?.buttonRef?.addEventListener('click', (e: Event) => {
       if (props.mode === 'hover') {
         e.stopPropagation()
       }
diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index 5d7431e6..8b7745f8 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -63,6 +63,7 @@ const popperOptions = computed<PopperOptions>(() => defu({}, props.popperOptions
 
 const [trigger, container] = usePopper(popperOptions.value)
 
+// https://github.com/tailwindlabs/headlessui/blob/f66f4926c489fc15289d528294c23a3dc2aee7b1/packages/%40headlessui-vue/src/components/popover/popover.ts#L151
 const popoverApi: Ref<any> = ref(null)
 
 let openTimeout: NodeJS.Timeout | null = null
@@ -77,7 +78,7 @@ onMounted(() => {
     const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
     popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
     // stop trigger click propagation on hover
-    popoverApi.value.button.addEventListener('click', (e: Event) => {
+    popoverApi.value?.button?.addEventListener('click', (e: Event) => {
       if (props.mode === 'hover') {
         e.stopPropagation()
       }