From 6667facbd1db4fbc0b63222313079551a9df2bdd Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 5 May 2022 11:11:36 +0200
Subject: [PATCH] Ensure `DialogPanel` exposes its ref (#1404)

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

* update changelog
---
 CHANGELOG.md                                  |  4 +-
 .../src/components/dialog/dialog.test.ts      | 44 +++++++++++++++++++
 .../src/components/dialog/dialog.ts           |  4 +-
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 12effef639..cde3a4560f 100644
--- a/CHANGELOG.md
+++ b/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]
 
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
index fc42bfec47..7e8814c2a5 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
+++ b/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(
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
index 63941360aa..56dce24e76 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.ts
+++ b/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,