Ensure tabbing to a portalled <PopoverPanel> component moves focus inside (without using <PortalGroup>) (#3239)

* ensure we allow focus in the focus sentinel button

We already checked this button when inside of a `PopoverGroup`, but we
didn't when you weren't using a `PopoverGroup` component.

* add test

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [internal] Don’t set a focus fallback for Dialog’s in demo mode ([#3194](https://github.com/tailwindlabs/headlessui/pull/3194))
 - Ensure page doesn't scroll down when pressing `Escape` to close the `Dialog` component ([#3218](https://github.com/tailwindlabs/headlessui/pull/3218))
 - Fix crash when toggling between `virtual` and non-virtual mode in `Combobox` component ([#3236](https://github.com/tailwindlabs/headlessui/pull/3236))
+- Ensure tabbing to a portalled `<PopoverPanel>` component moves focus inside (without using `<PortalGroup>`) ([#3239](https://github.com/tailwindlabs/headlessui/pull/3239))
 
 ### Deprecated
 

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

@@ -16,7 +16,7 @@ import { Keys, MouseButton, click, focus, press, shift } from '../../test-utils/
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
 import { Portal } from '../portal/portal'
 import { Transition } from '../transition/transition'
-import { Popover } from './popover'
+import { Popover, PopoverButton, PopoverPanel } from './popover'
 
 jest.mock('../../hooks/use-id')
 
@@ -1303,6 +1303,45 @@ describe('Keyboard interactions', () => {
   })
 
   describe('`Tab` key', () => {
+    it(
+      'should be possible to Tab through the panel contents and end up in the Button again (without PopoverGroup)',
+      suppressConsoleLogs(async () => {
+        render(
+          <Popover>
+            <PopoverButton>Trigger</PopoverButton>
+            <PopoverPanel portal>
+              <a href="/">Link 1</a>
+              <a href="/">Link 2</a>
+            </PopoverPanel>
+          </Popover>
+        )
+
+        // Focus the button of the first Popover
+        getByText('Trigger')?.focus()
+
+        // Open popover
+        await click(getByText('Trigger'))
+
+        // Verify we are focused on the first link
+        await press(Keys.Tab)
+        assertActiveElement(getByText('Link 1'))
+
+        // Verify we are focused on the second link
+        await press(Keys.Tab)
+        assertActiveElement(getByText('Link 2'))
+
+        // Let's Tab again
+        await press(Keys.Tab)
+
+        // Verify that the first Popover is still open
+        assertPopoverButton({ state: PopoverState.Visible })
+        assertPopoverPanel({ state: PopoverState.Visible })
+
+        // Verify that the button is focused again
+        assertActiveElement(getByText('Trigger'))
+      })
+    )
+
     it(
       'should be possible to Tab through the panel contents onto the next Popover.Button',
       suppressConsoleLogs(async () => {

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -92,6 +92,7 @@ interface StateDefinition {
 
   beforePanelSentinel: MutableRefObject<HTMLButtonElement | null>
   afterPanelSentinel: MutableRefObject<HTMLButtonElement | null>
+  afterButtonSentinel: MutableRefObject<HTMLButtonElement | null>
 
   __demoMode: boolean
 }
@@ -256,9 +257,19 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
     panelId: null,
     beforePanelSentinel: createRef(),
     afterPanelSentinel: createRef(),
+    afterButtonSentinel: createRef(),
   } as StateDefinition)
   let [
-    { popoverState, button, buttonId, panel, panelId, beforePanelSentinel, afterPanelSentinel },
+    {
+      popoverState,
+      button,
+      buttonId,
+      panel,
+      panelId,
+      beforePanelSentinel,
+      afterPanelSentinel,
+      afterButtonSentinel,
+    },
     dispatch,
   ] = reducerBag
 
@@ -346,6 +357,7 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
       if (root.contains(event.target)) return
       if (beforePanelSentinel.current?.contains?.(event.target)) return
       if (afterPanelSentinel.current?.contains?.(event.target)) return
+      if (afterButtonSentinel.current?.contains?.(event.target)) return
 
       dispatch({ type: ActionTypes.ClosePopover })
     },
@@ -700,6 +712,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
       {visible && !isWithinPanel && isPortalled && (
         <Hidden
           id={sentinelId}
+          ref={state.afterButtonSentinel}
           features={HiddenFeatures.Focusable}
           data-headlessui-focus-guard
           as="button"