From 05ba20ee65970e08bfdd19e8556b6e50909e7f7e Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Fri, 24 Jul 2026 09:16:43 -0400 Subject: [PATCH 1/2] 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" ``` From ee93b1c5f5f839f2cdf61422939dfa7d8c28975a Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 27 Jul 2026 13:18:34 -0400 Subject: [PATCH 2/2] Added deprecation to hoverable --- packages/react-core/src/components/Popover/Popover.tsx | 2 +- .../react-core/src/components/Popover/examples/Popover.md | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index 38de491ac0c..f43ac7f38b4 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -205,7 +205,7 @@ export interface PopoverProps { shouldOpen?: (event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void; /** Flag indicating whether the close button should be shown. */ showClose?: boolean; - /** Sets an interaction to open popover, defaults to "click" */ + /** @deprecated Sets an interaction to open popover, defaults to "click" */ triggerAction?: 'click' | 'hover'; /** 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. diff --git a/packages/react-core/src/components/Popover/examples/Popover.md b/packages/react-core/src/components/Popover/examples/Popover.md index c99107ddebf..a3017b4f971 100644 --- a/packages/react-core/src/components/Popover/examples/Popover.md +++ b/packages/react-core/src/components/Popover/examples/Popover.md @@ -27,7 +27,9 @@ By default, the `appendTo` prop of the popover will append to the document body 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" +It is instead recommended to use our [tooltip component](/components/tooltip). + +```ts isDeprecated file="./PopoverHover.tsx" ```