From aa0056fc1f549c559d3e6fc1f236a1c21c6729bd Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 9 Jun 2022 14:23:22 +0200
Subject: [PATCH] Only render the `Dialog` on the client (#1566)

* only render the Dialog on the client

* update changelog
---
 packages/@headlessui-vue/CHANGELOG.md         |  1 +
 .../src/components/dialog/dialog.test.ts      | 34 ++++++++++++-------
 .../src/components/dialog/dialog.ts           |  9 ++++-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index 574417580..0a0edfb67 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support `<slot>` children when using `as="template"` ([#1548](https://github.com/tailwindlabs/headlessui/pull/1548))
 - Improve outside click of `Dialog` component ([#1546](https://github.com/tailwindlabs/headlessui/pull/1546))
 - Detect outside clicks from within `<iframe>` elements ([#1552](https://github.com/tailwindlabs/headlessui/pull/1552))
+- Only render the `Dialog` on the client ([#1566](https://github.com/tailwindlabs/headlessui/pull/1566))
 
 ## [1.6.4] - 2022-05-29
 
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
index d74188c9a..0087fa511 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
@@ -1,12 +1,4 @@
-import {
-  defineComponent,
-  ref,
-  nextTick,
-  h,
-  ComponentOptionsWithoutProps,
-  ConcreteComponent,
-  onMounted,
-} from 'vue'
+import { defineComponent, ref, nextTick, h, ConcreteComponent, onMounted } from 'vue'
 import { createRenderTemplate, render } from '../../test-utils/vue-testing-library'
 
 import {
@@ -109,6 +101,7 @@ describe('Safe guards', () => {
 
 describe('refs', () => {
   it('should be possible to access the ref on the DialogBackdrop', async () => {
+    expect.assertions(2)
     renderTemplate({
       template: `
         <Dialog :open="true">
@@ -121,8 +114,10 @@ describe('refs', () => {
       setup() {
         let backdrop = ref<{ el: Element; $el: Element } | null>(null)
         onMounted(() => {
-          expect(backdrop.value?.el).toBeInstanceOf(HTMLDivElement)
-          expect(backdrop.value?.$el).toBeInstanceOf(HTMLDivElement)
+          nextTick(() => {
+            expect(backdrop.value?.el).toBeInstanceOf(HTMLDivElement)
+            expect(backdrop.value?.$el).toBeInstanceOf(HTMLDivElement)
+          })
         })
         return { backdrop }
       },
@@ -130,6 +125,7 @@ describe('refs', () => {
   })
 
   it('should be possible to access the ref on the DialogPanel', async () => {
+    expect.assertions(2)
     renderTemplate({
       template: `
         <Dialog :open="true">
@@ -141,8 +137,10 @@ describe('refs', () => {
       setup() {
         let panel = ref<{ el: Element; $el: Element } | null>(null)
         onMounted(() => {
-          expect(panel.value?.el).toBeInstanceOf(HTMLDivElement)
-          expect(panel.value?.$el).toBeInstanceOf(HTMLDivElement)
+          nextTick(() => {
+            expect(panel.value?.el).toBeInstanceOf(HTMLDivElement)
+            expect(panel.value?.$el).toBeInstanceOf(HTMLDivElement)
+          })
         })
         return { panel }
       },
@@ -1153,6 +1151,8 @@ describe('Mouse interactions', () => {
         },
       })
 
+      await new Promise<void>(nextTick)
+
       // Verify it is open
       assertDialog({ state: DialogState.Visible })
 
@@ -1196,6 +1196,8 @@ describe('Mouse interactions', () => {
         },
       })
 
+      await new Promise<void>(nextTick)
+
       // Verify it is open
       assertDialog({ state: DialogState.Visible })
 
@@ -1233,6 +1235,8 @@ describe('Mouse interactions', () => {
         },
       })
 
+      await new Promise<void>(nextTick)
+
       // Verify it is open
       assertDialog({ state: DialogState.Visible })
 
@@ -1277,6 +1281,8 @@ describe('Mouse interactions', () => {
         },
       })
 
+      await new Promise<void>(nextTick)
+
       // Verify it is open
       assertDialog({ state: DialogState.Visible })
 
@@ -1327,6 +1333,8 @@ describe('Mouse interactions', () => {
         },
       })
 
+      await new Promise<void>(nextTick)
+
       // Verify it is open
       assertDialog({ state: DialogState.Visible })
 
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
index dd1b24c7f..90181f67a 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -78,6 +78,11 @@ export let Dialog = defineComponent({
   },
   emits: { close: (_close: boolean) => true },
   setup(props, { emit, attrs, slots, expose }) {
+    let ready = ref(false)
+    onMounted(() => {
+      ready.value = true
+    })
+
     let nestedDialogCount = ref(0)
 
     let usesOpenClosedState = useOpenClosed()
@@ -117,7 +122,9 @@ export let Dialog = defineComponent({
       )
     }
 
-    let dialogState = computed(() => (open.value ? DialogStates.Open : DialogStates.Closed))
+    let dialogState = computed(() =>
+      !ready.value ? DialogStates.Closed : open.value ? DialogStates.Open : DialogStates.Closed
+    )
     let enabled = computed(() => dialogState.value === DialogStates.Open)
 
     let hasNestedDialogs = computed(() => nestedDialogCount.value > 1) // 1 is the current dialog