only render the Dialog on the client

tailwindlabs · Jun 9, 2022 · 00f11ea · 00f11ea
1 parent f2a813e
commit 00f11ea
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git 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,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 })
 

diff --git 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