fix(Popover): avoid crash on mount if ref not loaded (#105)

nuxt · Oct 26, 2022 · e9f0224 · e9f0224 · vercel · Oct 26, 2022
1 parent 929192f
commit e9f0224
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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()
       }