Ensure the the <Popover.Panel focus> closes correctly (#1477)

* ensure the the `<Popover.Panel focus>` closes correctly * update changelog
tailwindlabs · May 19, 2022 · cc6aaa2 · cc6aaa2
1 parent 9280d92
commit cc6aaa2
Show file tree

Hide file tree

Showing 7 changed files with 308 additions and 227 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,12 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Allow to override the `type` on the `ComboboxInput` ([#1476](https://github.com/tailwindlabs/headlessui/pull/1476))
+- Ensure the the `<PopoverPanel focus>` closes correctly ([#1477](https://github.com/tailwindlabs/headlessui/pull/1477))
 
 ## [Unreleased - @headlessui/react]
 
 ### Fixed
 
 - Allow to override the `type` on the `Combobox.Input` ([#1476](https://github.com/tailwindlabs/headlessui/pull/1476))
+- Ensure the the `<Popover.Panel focus>` closes correctly ([#1477](https://github.com/tailwindlabs/headlessui/pull/1477))
 
 ## [@headlessui/vue@v1.6.2] - 2022-05-19
 

diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx
@@ -1500,6 +1500,7 @@ describe('Keyboard interactions', () => {
 
         // Open the second popover
         await click(getByText('Trigger 2'))
+        getByText('Trigger 2')?.focus()
 
         // Ensure the second popover is open
         assertPopoverButton({ state: PopoverState.Visible }, getByText('Trigger 2'))
@@ -2146,6 +2147,7 @@ describe('Mouse interactions', () => {
 
       // Open popover
       await click(getPopoverButton())
+      getPopoverButton()?.focus()
 
       // Verify it is open
       assertPopoverButton({ state: PopoverState.Visible })
@@ -2269,4 +2271,62 @@ describe('Mouse interactions', () => {
       assertPopoverButton({ state: PopoverState.InvisibleHidden })
     })
   )
+
+  it(
+    'should be possible to close the Popover by clicking on the Popover.Button outside the Popover.Panel',
+    suppressConsoleLogs(async () => {
+      render(
+        <Popover>
+          <Popover.Button>Toggle</Popover.Button>
+          <Popover.Panel>
+            <button>Contents</button>
+          </Popover.Panel>
+        </Popover>
+      )
+
+      // Open the popover
+      await click(getPopoverButton())
+
+      // Verify it is open
+      assertPopoverPanel({ state: PopoverState.Visible })
+
+      // Close the popover
+      await click(getPopoverButton())
+
+      // Verify it is closed
+      assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+
+      // Verify the button is focused
+      assertActiveElement(getPopoverButton())
+    })
+  )
+
+  it(
+    'should be possible to close the Popover by clicking on the Popover.Button outside the Popover.Panel (when using the `focus` prop)',
+    suppressConsoleLogs(async () => {
+      render(
+        <Popover>
+          <Popover.Button>Toggle</Popover.Button>
+          <Popover.Panel focus>
+            <button>Contents</button>
+          </Popover.Panel>
+        </Popover>
+      )
+
+      // Open the popover
+      await click(getPopoverButton())
+
+      // Verify it is open
+      assertPopoverPanel({ state: PopoverState.Visible })
+
+      // Close the popover
+      await click(getPopoverButton())
+
+      // Verify it is closed
+      assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+
+      // Verify the button is focused
+      assertActiveElement(getPopoverButton())
+    })
+  )
 })