Add test

This test isn’t exactly right for JSDOM but it does mirror what we would do in the browser to reproduce the problem

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

@@ -9,6 +9,12 @@ import {
   DialogTitle,
   DialogDescription,
 } from './dialog'
+
+import {
+  Popover,
+  PopoverPanel,
+  PopoverButton,
+} from '../popover/popover'
 import { TransitionRoot } from '../transitions/transition'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import {
@@ -24,6 +30,10 @@ import {
   assertActiveElement,
   getDialogs,
   getDialogOverlays,
+  getPopoverButton,
+  getPopoverPanel,
+  assertPopoverPanel,
+  PopoverState,
 } from '../../test-utils/accessibility-assertions'
 import { click, mouseDrag, press, Keys } from '../../test-utils/interactions'
 import { html } from '../../test-utils/html'
@@ -680,6 +690,68 @@ describe('Rendering', () => {
 })
 
 describe('Composition', () => {
+  it(
+    'should be possible to open a dialog from inside a Popover (and then close it)',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        components: { Popover, PopoverButton, PopoverPanel },
+        template: `
+          <div>
+            <Popover>
+              <PopoverButton>Open Popover</PopoverButton>
+              <PopoverPanel>
+                <div id="openDialog" @click="isDialogOpen = true">Open dialog</div>
+              </PopoverPanel>
+            </Popover>
+
+            <Dialog :open="isDialogOpen">
+              <DialogPanel>
+                <button id="closeDialog" @click="isDialogOpen = false">Close Dialog</button>
+              </DialogPanel>
+            </Dialog>
+          </div>
+        `,
+        setup() {
+          let isDialogOpen = ref(false)
+          return {
+            isDialogOpen,
+          }
+        }
+      })
+
+      await nextFrame()
+
+      // Nothing is open initially
+      assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+      assertDialog({ state: DialogState.InvisibleUnmounted })
+      assertActiveElement(document.body)
+
+      // Open the popover
+      await click(getPopoverButton())
+
+      // The popover should be open but the dialog should not
+      assertPopoverPanel({ state: PopoverState.Visible })
+      assertDialog({ state: DialogState.InvisibleUnmounted })
+      assertActiveElement(getPopoverButton())
+
+      // Open the dialog from inside the popover
+      await click(document.getElementById('openDialog'))
+
+      // The dialog should be open but the popover should not
+      assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+      assertDialog({ state: DialogState.Visible })
+      assertActiveElement(document.getElementById('closeDialog'))
+
+      // Close the dialog from inside itself
+      await click(document.getElementById('closeDialog'))
+
+      // Nothing should be open
+      assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+      assertDialog({ state: DialogState.InvisibleUnmounted })
+      assertActiveElement(getPopoverButton())
+    })
+  )
+
   it(
     'should be possible to open the Dialog via a Transition component',
     suppressConsoleLogs(async () => {