Skip to content

fix(Popover): fixed focus trapped on hoverable trigger #12591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thatblindgeye wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −2
Open

fix(Popover): fixed focus trapped on hoverable trigger #12591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/react-core/src/components/Popover/Popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,9 @@ export interface PopoverProps {
showClose?: boolean;
/** Sets an interaction to open popover, defaults to "click" */
triggerAction?: 'click' | 'hover';
/** Whether to trap focus in the popover. */
/** Whether to trap focus in the popover. When using a triggerAction of "hover", this will be set to false
* by default and must remain false.
*/
Comment on lines +210 to +212

@coderabbitai coderabbitai Bot Jul 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Force hover-triggered popovers to disable focus trapping.

This only changes the default; an explicit withFocusTrap={true} still enables the trap for triggerAction="hover", contradicting the documented “must remain false” contract and the PR objective. Normalize the resolved value to false whenever triggerAction === 'hover', and add a regression test for the explicit-true case.

Proposed direction 
-  withFocusTrap: propWithFocusTrap = triggerAction === 'hover' ? false : undefined,
+  withFocusTrap: propWithFocusTrap,
...
+  const resolvedWithFocusTrap = triggerAction === 'hover' ? false : propWithFocusTrap;
-  const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));
+  const [focusTrapActive, setFocusTrapActive] = useState(Boolean(resolvedWithFocusTrap));

Use resolvedWithFocusTrap for activation and returnFocusOnDeactivate as well.

Also applies to: 272-272

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/react-core/src/components/Popover/Popover.tsx` around lines 210 -
212, Force the resolved focus-trap setting to false whenever triggerAction is
"hover", including when withFocusTrap is explicitly true. Update both activation
and return-focus behavior to use resolvedWithFocusTrap, and add a regression
test covering the explicit-true hover case.

withFocusTrap?: boolean;
/** The z-index of the popover. */
zIndex?: number;
Expand Down Expand Up @@ -267,7 +269,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
],
animationDuration = 300,
id,
withFocusTrap: propWithFocusTrap,
withFocusTrap: propWithFocusTrap = triggerAction === 'hover' ? false : undefined,
triggerRef,
hasNoPadding = false,
hasAutoWidth = false,
Expand Down
2 changes: 2 additions & 0 deletions packages/react-core/src/components/Popover/examples/Popover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ By default, the `appendTo` prop of the popover will append to the document body

### Hoverable

Pass the `triggerAction="hover"` property to make a `<Popover>` that is triggered via hover and focus rather than on click. When using a hoverable Popover, you **must not** include any interactive or semantic content (e.g. buttons, links, headings, lists, etc), as focus is not intended to enter a hoverable `<Popover>`. Including such content may cause an inaccessible UI for users who are not able to reach the content when navigating via assistive tech.

```ts file="./PopoverHover.tsx"

```
Expand Down
Loading