Don’t overwrite element.focus on popover panels

packages/@headlessui-react/src/components/dialog/dialog.test.tsx

@@ -2,16 +2,20 @@ import React, { createElement, useRef, useState, Fragment } from 'react'
 import { render } from '@testing-library/react'
 
 import { Dialog } from './dialog'
+import { Popover } from '../popover/popover'
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import {
   DialogState,
+  PopoverState,
   assertDialog,
   assertDialogDescription,
   assertDialogOverlay,
   assertDialogTitle,
+  assertPopoverPanel,
   getDialog,
   getDialogOverlay,
   getDialogBackdrop,
+  getPopoverButton,
   getByText,
   assertActiveElement,
   getDialogs,
@@ -519,6 +523,69 @@ describe('Rendering', () => {
 })
 
 describe('Composition', () => {
+  it(
+    'should be possible to open a dialog from inside a Popover (and then close it)',
+    suppressConsoleLogs(async () => {
+      function Example() {
+        let [isDialogOpen, setIsDialogOpen] = useState(false)
+
+        return (
+          <div>
+            <Popover>
+              <Popover.Button>Open Popover</Popover.Button>
+              <Popover.Panel>
+                <div id="openDialog" onClick={() => setIsDialogOpen(true)}>
+                  Open dialog
+                </div>
+              </Popover.Panel>
+            </Popover>
+
+            <Dialog open={isDialogOpen} onClose={console.log}>
+              <Dialog.Panel>
+                <button id="closeDialog" onClick={() => setIsDialogOpen(false)}>
+                  Close Dialog
+                </button>
+              </Dialog.Panel>
+            </Dialog>
+          </div>
+        )
+      }
+
+      render(<Example />)
+
+      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 () => {

packages/@headlessui-vue/CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve outside click on Safari iOS ([#1712](https://github.com/tailwindlabs/headlessui/pull/1712))
 - Improve event handler merging ([#1715](https://github.com/tailwindlabs/headlessui/pull/1715))
 - Fix incorrect scrolling to the bottom when opening a `Dialog` ([#1716](https://github.com/tailwindlabs/headlessui/pull/1716))
+- Don't overwrite `element.focus()` on `<PopoverPanel>` ([#1719](https://github.com/tailwindlabs/headlessui/pull/1719))
 
 ## [1.6.7] - 2022-07-12
 

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

@@ -9,17 +9,22 @@ 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 {
   DialogState,
+  PopoverState,
   assertDialog,
   assertDialogDescription,
   assertDialogOverlay,
   assertDialogTitle,
+  assertPopoverPanel,
   getDialog,
   getDialogOverlay,
   getDialogBackdrop,
+  getPopoverButton,
   getByText,
   assertActiveElement,
   getDialogs,
@@ -680,6 +685,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 () => {

packages/@headlessui-vue/src/components/popover/popover.ts

@@ -14,7 +14,7 @@ import {
 } from 'vue'
 
 import { match } from '../../utils/match'
-import { render, Features } from '../../utils/render'
+import { render, omit, Features } from '../../utils/render'
 import { useId } from '../../hooks/use-id'
 import { Keys } from '../../keyboard'
 import {
@@ -620,7 +620,7 @@ export let PopoverPanel = defineComponent({
 
       return render({
         ourProps,
-        theirProps: { ...attrs, ...props },
+        theirProps: { ...attrs, ...omit(props, ['focus']) },
         attrs,
         slot,
         slots: {