Ensure links are triggered inside Popover Panel components (#1153)

* ensure links are triggered inside `Popover Panel` components * update changelog
tailwindlabs · Feb 25, 2022 · 2aaa293 · 2aaa293
1 parent f3c70aa
commit 2aaa293
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Forward the `ref` to all components ([#1116](https://github.com/tailwindlabs/headlessui/pull/1116))
+- Ensure links are triggered inside `Popover Panel` components ([#1153](https://github.com/tailwindlabs/headlessui/pull/1153))
 
 ## [Unreleased - @headlessui/vue]
 
@@ -18,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make sure that the input syncs when the combobox closes ([#1137](https://github.com/tailwindlabs/headlessui/pull/1137))
 - Ensure that you can close the combobox initially ([#1148](https://github.com/tailwindlabs/headlessui/pull/1148))
 - Fix Dialog usage in Tabs ([#1149](https://github.com/tailwindlabs/headlessui/pull/1149))
+- Ensure links are triggered inside `Popover Panel` components ([#1153](https://github.com/tailwindlabs/headlessui/pull/1153))
 
 ## [@headlessui/react@v1.5.0] - 2022-02-17
 

diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx
@@ -1828,6 +1828,43 @@ describe('Keyboard interactions', () => {
         assertActiveElement(getPopoverButton())
       })
     )
+
+    it(
+      'should close the Popover by pressing `Enter` on a Popover.Button and go to the href of the `a` inside a Popover.Panel',
+      suppressConsoleLogs(async () => {
+        render(
+          <Popover>
+            <Popover.Button>Open</Popover.Button>
+            <Popover.Panel>
+              <Popover.Button as={React.Fragment}>
+                <a href="#closed">Close</a>
+              </Popover.Button>
+            </Popover.Panel>
+          </Popover>
+        )
+
+        // Open the popover
+        await click(getPopoverButton())
+
+        let closeLink = getByText('Close')
+
+        expect(closeLink).not.toHaveAttribute('id')
+        expect(closeLink).not.toHaveAttribute('aria-controls')
+        expect(closeLink).not.toHaveAttribute('aria-expanded')
+
+        // The close button should close the popover
+        await press(Keys.Enter, closeLink)
+
+        // Verify it is closed
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+
+        // Verify we restored the Open button
+        assertActiveElement(getPopoverButton())
+
+        // Verify that we got redirected to the href
+        expect(window.location.hash).toEqual('#closed')
+      })
+    )
   })
 })
 

diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -335,7 +335,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
           case Keys.Space:
           case Keys.Enter:
             event.preventDefault() // Prevent triggering a *click* event
-            event.stopPropagation()
+            // @ts-expect-error
+            event.target.click?.()
             dispatch({ type: ActionTypes.ClosePopover })
             state.button?.focus() // Re-focus the original opening Button
             break

diff --git a/packages/@headlessui-vue/src/components/popover/popover.test.ts b/packages/@headlessui-vue/src/components/popover/popover.test.ts
@@ -1989,6 +1989,45 @@ describe('Keyboard interactions', () => {
         assertActiveElement(getPopoverButton())
       })
     )
+
+    it(
+      'should close the Popover by pressing `Enter` on a PopoverButton and go to the href of the `a` inside a PopoverPanel',
+      suppressConsoleLogs(async () => {
+        renderTemplate(
+          html`
+            <Popover>
+              <PopoverButton>Open</PopoverButton>
+              <PopoverPanel>
+                <PopoverButton as="template">
+                  <a href="#closed">Close</a>
+                </PopoverButton>
+              </PopoverPanel>
+            </Popover>
+          `
+        )
+
+        // Open the popover
+        await click(getPopoverButton())
+
+        let closeLink = getByText('Close')
+
+        expect(closeLink).not.toHaveAttribute('id')
+        expect(closeLink).not.toHaveAttribute('aria-controls')
+        expect(closeLink).not.toHaveAttribute('aria-expanded')
+
+        // The close button should close the popover
+        await press(Keys.Enter, closeLink)
+
+        // Verify it is closed
+        assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
+
+        // Verify we restored the Open button
+        assertActiveElement(getPopoverButton())
+
+        // Verify that we got redirected to the href
+        expect(window.location.hash).toEqual('#closed')
+      })
+    )
   })
 })
 

diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts
@@ -250,7 +250,8 @@ export let PopoverButton = defineComponent({
           case Keys.Space:
           case Keys.Enter:
             event.preventDefault() // Prevent triggering a *click* event
-            event.stopPropagation()
+            // @ts-expect-error
+            event.target.click?.()
             api.closePopover()
             dom(api.button)?.focus() // Re-focus the original opening Button
             break