Allow <button> to be in nested components in <PopoverButton>

packages/@headlessui-vue/CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure hidden `TabPanel` components are hidden from the accessibility tree ([#2708](https://github.com/tailwindlabs/headlessui/pull/2708))
 - Add support for `role="alertdialog"` to `<Dialog>` component ([#2709](https://github.com/tailwindlabs/headlessui/pull/2709))
 - Ensure blurring the `ComboboxInput` component closes the `Combobox` ([#2712](https://github.com/tailwindlabs/headlessui/pull/2712))
+- Allow `<button>` to be in nested components in `<PopoverButton>` ([#2715](https://github.com/tailwindlabs/headlessui/pull/2715))
 
 ## [1.7.16] - 2023-08-17
 

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

@@ -14,6 +14,7 @@ import {
   // Types
   InjectionKey,
   Ref,
+  ComponentPublicInstance,
 } from 'vue'
 
 import { match } from '../../utils/match'
@@ -315,12 +316,13 @@ export let PopoverButton = defineComponent({
       panelContext === null ? false : panelContext.value === api.panelId.value
     )
 
-    let elementRef = ref(null)
+    let elementRef = ref<HTMLElement | ComponentPublicInstance | null>(null)
     let sentinelId = `headlessui-focus-sentinel-${useId()}`
 
     if (!isWithinPanel.value) {
       watchEffect(() => {
-        api.button.value = elementRef.value
+        // `elementRef` could be a Vue component in which case we want to grab the DOM element from it
+        api.button.value = dom(elementRef)
       })
     }
 

packages/@headlessui-vue/src/hooks/use-resolve-button-type.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted, watchEffect, Ref } from 'vue'
+import { ref, onMounted, watchEffect, Ref, ComponentPublicInstance } from 'vue'
 import { dom } from '../utils/dom'
 
 function resolveType(type: unknown, as: string | object) {
@@ -12,7 +12,7 @@ function resolveType(type: unknown, as: string | object) {
 
 export function useResolveButtonType(
   data: Ref<{ as: string | object; type?: unknown }>,
-  refElement: Ref<HTMLElement | null>
+  refElement: Ref<HTMLElement | ComponentPublicInstance | null>
 ) {
   let type = ref(resolveType(data.value.type, data.value.as))
 

packages/@headlessui-vue/src/utils/dom.ts

@@ -1,8 +1,23 @@
 import { Ref, ComponentPublicInstance } from 'vue'
 
-export function dom<T extends Element | ComponentPublicInstance>(ref?: Ref<T | null>): T | null {
+type AsElement<T extends HTMLElement | ComponentPublicInstance> =
+  | (T extends HTMLElement ? T : HTMLElement)
+  | null
+
+export function dom<T extends HTMLElement | ComponentPublicInstance>(
+  ref?: Ref<T | null>
+): AsElement<T> | null {
   if (ref == null) return null
   if (ref.value == null) return null
 
-  return (ref.value as { $el?: T }).$el ?? ref.value
+  let el = (ref.value as { $el?: T }).$el ?? ref.value
+
+  // In this case we check for `Node` because returning `null` from a
+  // component renders a `Comment` which is a `Node` but not `Element`
+  // The types don't encode this possibility but we handle it here at runtime
+  if (el instanceof Node) {
+    return el as AsElement<T>
+  }
+
+  return null
 }