Ensure DialogPanel exposes its ref (#1404)

* ensure we expose the `el` and `$el` on `DialogPanel`

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - @headlessui/vue]
 
-- Nothing yet!
+### Fixed
+
+- Ensure `DialogPanel` exposes its ref ([#1404](https://github.com/tailwindlabs/headlessui/pull/1404))
 
 ## [Unreleased - @headlessui/react]
 

packages/@headlessui-vue/src/components/dialog/dialog.test.ts

@@ -5,6 +5,7 @@ import {
   h,
   ComponentOptionsWithoutProps,
   ConcreteComponent,
+  onMounted,
 } from 'vue'
 import { render } from '../../test-utils/vue-testing-library'
 
@@ -120,6 +121,49 @@ describe('Safe guards', () => {
   )
 })
 
+describe('refs', () => {
+  it('should be possible to access the ref on the DialogBackdrop', async () => {
+    renderTemplate({
+      template: `
+        <Dialog :open="true">
+          <DialogBackdrop ref="backdrop" />
+          <DialogPanel>
+            <button>element</button>
+          </DialogPanel>
+        </Dialog>
+      `,
+      setup() {
+        let backdrop = ref<{ el: Element; $el: Element } | null>(null)
+        onMounted(() => {
+          expect(backdrop.value?.el).toBeInstanceOf(HTMLDivElement)
+          expect(backdrop.value?.$el).toBeInstanceOf(HTMLDivElement)
+        })
+        return { backdrop }
+      },
+    })
+  })
+
+  it('should be possible to access the ref on the DialogPanel', async () => {
+    renderTemplate({
+      template: `
+        <Dialog :open="true">
+          <DialogPanel ref="panel">
+            <button>element</button>
+          </DialogPanel>
+        </Dialog>
+      `,
+      setup() {
+        let panel = ref<{ el: Element; $el: Element } | null>(null)
+        onMounted(() => {
+          expect(panel.value?.el).toBeInstanceOf(HTMLDivElement)
+          expect(panel.value?.$el).toBeInstanceOf(HTMLDivElement)
+        })
+        return { panel }
+      },
+    })
+  })
+})
+
 describe('Rendering', () => {
   describe('Dialog', () => {
     it(

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

@@ -401,10 +401,12 @@ export let DialogPanel = defineComponent({
   props: {
     as: { type: [Object, String], default: 'div' },
   },
-  setup(props, { attrs, slots }) {
+  setup(props, { attrs, slots, expose }) {
     let api = useDialogContext('DialogPanel')
     let id = `headlessui-dialog-panel-${useId()}`
 
+    expose({ el: api.panelRef, $el: api.panelRef })
+
     return () => {
       let ourProps = {
         id,