Only render the Dialog on the client

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
 

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,15 +114,18 @@ 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 }
       },
     })
   })
 
   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 })
 

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