<PopoverPanel modal={true}> does not trap focus

[mpsijm]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.8

What browser are you using?

Chrome and Firefox

Reproduction URL

https://codesandbox.io/p/sandbox/sparkling-surf-h94rkh?file=%2Fsrc%2FApp.jsx

Steps to reproduce:

• Click "Solutions"
• Hit Tab until the focus jumps outside the popover panel and to the <input> box

Describe your issue

According to the documentation, setting modal={true} enables focus trapping. However, the focus is not trapped.

[RobinMalfait]

Hey!

This was a small documentation issue and I updated it. The Popover component doesn't focus trap on purpose since it's often used as part of your top navigation. Tabbing out of a Popover or PopoverGroup will close the Popover components.

The modal prop only enables scroll locking in case of the Popover component.

[vincerubinetti]

The Popover component doesn't scroll lock on purpose

The modal prop only enables scroll locking in case of the Popover component.

Huh? These two contradict each other. Maybe you meant the Dialog component? If you're trying to say that popovers shouldn't trap focus, that goes against what React Aria and Radix UI do by default and what React Aria recommends:

Could you link to the PR or commit that fixes the docs, because I still see the modal prop on https://headlessui.com/react/popover

Also the issue is about focus trapping, not scroll locking (preventing the document body from scrolling in the background).

[RobinMalfait]

Sorry I meant focus trap in the first case. So the Popover does not focus trap, and does not scroll lock by default. Using the modal prop does perform scroll locking, but not focus trapping.

Tools like React Aria does focus trap, but that's because they put a Dialog inside the Popover component.

In our case, the use case for our Popovers are to be used as part of your navigation where you can tab through your menu and once you reach the end of the Popover or PopoverGroup it will close the Popover(s). E.g.:

• https://tailwindcss.com/plus/ui-blocks/marketing/elements/flyout-menus
• https://tailwindcss.com/plus/ui-blocks/ecommerce/components/store-navigation

The change in the documentation is just this line that doesn't mention focus trapping anymore: