Tabbing out of Popover inside shadow DOM focuses wrong element

[oyamauchi]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.18

What browser are you using?

Brave, Firefox (both macOS)

Reproduction URL

https://github.com/oyamauchi/headlessui-bug

Describe your issue

When a Popover is used inside a shadow DOM, when a user interaction (e.g. the Tab key) causes focus to move forward out of the Popover, it moves to the top of the document body instead of to the element that should come after the Popover in the tab order.

The repro linked above has specific instructions in the README, but basically, it looks like this:

<button>outside shadow DOM</button>
<component>
  #shadow-root {
    <Popover>
      <Popover.Button>toggle</Popover.Button>
      <Popover.Panel>
        <button>inside the panel</button>
      </Popover.Panel>
    </Popover>
    <button>after the popover</button>
  }
</component>

When focus is on the inside the panel button and you hit Tab, it should focus after the popover; instead, focus goes to outside shadow DOM.

I believe this is because Popover calls getFocusableElements() without arguments, so it's looking for focusable elements within document.body, instead of within the shadow root where the Popover is.

[simoncdn]

Hello @oyamauchi,
I've tried to fix it

[SongRongLee]

Same issue here at version 2.0.3. Users would expect to tab into the popover after they open it using space or enter on the PopoverButton, but the current behavior of tabbing again after the popover is opened is closing it.
The issue can be reproduced on the official document website.

[florianbepunkt]

Can confirm, the issue still exists with @headlessui/[email protected]