diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index 9585a13bf7d..f43ac7f38b4 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -205,9 +205,11 @@ 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. */ + /** 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..a3017b4f971 100644 --- a/packages/react-core/src/components/Popover/examples/Popover.md +++ b/packages/react-core/src/components/Popover/examples/Popover.md @@ -25,7 +25,11 @@ By default, the `appendTo` prop of the popover will append to the document body ### Hoverable -```ts file="./PopoverHover.tsx" +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. + +It is instead recommended to use our [tooltip component](/components/tooltip). + +```ts isDeprecated file="./PopoverHover.tsx" ```