From d2a029fc1a869daae7f0da2a7b451c11a4921c93 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 24 Jul 2026 09:16:43 -0400 Subject: [PATCH] fix(Popover): fixed focus trapped on hoverable trigger --- packages/react-core/src/components/Popover/Popover.tsx | 6 ++++-- .../react-core/src/components/Popover/examples/Popover.md | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index 9585a13bf7d..38de491ac0c 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -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. + */ withFocusTrap?: boolean; /** The z-index of the popover. */ zIndex?: number; @@ -267,7 +269,7 @@ export const Popover: React.FunctionComponent = ({ ], animationDuration = 300, id, - withFocusTrap: propWithFocusTrap, + withFocusTrap: propWithFocusTrap = triggerAction === 'hover' ? false : undefined, triggerRef, hasNoPadding = false, hasAutoWidth = false, diff --git a/packages/react-core/src/components/Popover/examples/Popover.md b/packages/react-core/src/components/Popover/examples/Popover.md index 7755154fd84..c99107ddebf 100644 --- a/packages/react-core/src/components/Popover/examples/Popover.md +++ b/packages/react-core/src/components/Popover/examples/Popover.md @@ -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 `` 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 ``. 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" ```