diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index 5915648c534..14faddb0023 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -204,7 +204,7 @@ export interface PopoverProps { /** Flag indicating whether the close button should be shown. */ showClose?: boolean; /** Sets an interaction to open popover, defaults to "click" */ - variant?: 'click' | 'hover'; + triggerAction?: 'click' | 'hover'; /** Whether to trap focus in the popover. */ withFocusTrap?: boolean; /** The z-index of the popover. */ @@ -243,7 +243,7 @@ export const Popover: React.FunctionComponent = ({ onShown = (): void => null, onMount = (): void => null, zIndex = 9999, - variant = 'click', + triggerAction = 'click', minWidth = popoverMinWidth && popoverMinWidth.value, maxWidth = popoverMaxWidth && popoverMaxWidth.value, closeBtnAriaLabel = 'Close', @@ -282,7 +282,7 @@ export const Popover: React.FunctionComponent = ({ const showTimerRef = React.useRef(null); const hideTimerRef = React.useRef(null); const popoverRef = React.useRef(null); - const hideShowTime = variant === 'hover' ? animationDuration : 0; + const hideShowTime = triggerAction === 'hover' ? animationDuration : 0; React.useEffect(() => { onMount(); @@ -367,19 +367,17 @@ export const Popover: React.FunctionComponent = ({ } }; const onTriggerClick = (event: MouseEvent) => { - if (variant === 'click') { - if (triggerManually) { - if (visible) { - shouldClose(event, hide); - } else { - shouldOpen(event, show); - } + if (triggerManually) { + if (visible) { + shouldClose(event, hide); } else { - if (visible) { - hide(event); - } else { - show(event, true); - } + shouldOpen(event, show); + } + } else { + if (visible) { + hide(event); + } else { + show(event, true); } } }; @@ -390,23 +388,35 @@ export const Popover: React.FunctionComponent = ({ } }; - const onMouseEnter = (event: any) => { - if (variant === 'hover') { - if (triggerManually) { - shouldOpen(event as MouseEvent, show); - } else { - show(event as MouseEvent, false); - } + const onMouseEnter = (event: MouseEvent) => { + if (triggerManually) { + shouldOpen(event as MouseEvent, show); + } else { + show(event as MouseEvent, false); } }; - const onMouseLeave = (event: any) => { - if (variant === 'hover') { - if (triggerManually) { - shouldClose(event as MouseEvent, hide); - } else { - hide(event); - } + const onMouseLeave = (event: MouseEvent) => { + if (triggerManually) { + shouldClose(event as MouseEvent, hide); + } else { + hide(event); + } + }; + + const onFocus = (event: FocusEvent) => { + if (triggerManually) { + shouldOpen(event as MouseEvent | KeyboardEvent, show); + } else { + show(event as MouseEvent | KeyboardEvent, false); + } + }; + + const onBlur = (event: FocusEvent) => { + if (triggerManually) { + shouldClose(event as MouseEvent | KeyboardEvent, hide); + } else { + hide(event as MouseEvent | KeyboardEvent); } }; @@ -426,6 +436,7 @@ export const Popover: React.FunctionComponent = ({ returnFocusOnDeactivate: true, clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' }, + fallbackFocus: () => { // If the popover's trigger is focused but scrolled out of view, // FocusTrap will throw an error when the Enter button is used on the trigger. @@ -452,8 +463,6 @@ export const Popover: React.FunctionComponent = ({ aria-labelledby={headerContent ? `popover-${uniqueId}-header` : undefined} aria-describedby={`popover-${uniqueId}-body`} onMouseDown={onContentMouseDown} - onMouseLeave={onMouseLeave} - onMouseEnter={onMouseEnter} style={{ minWidth: hasCustomMinWidth ? minWidth : null, maxWidth: hasCustomMaxWidth ? maxWidth : null, @@ -464,7 +473,7 @@ export const Popover: React.FunctionComponent = ({ > - {showClose && variant === 'click' && ( + {showClose && triggerAction === 'click' && ( )} {headerContent && ( @@ -500,12 +509,16 @@ export const Popover: React.FunctionComponent = ({ minWidth={minWidth} appendTo={appendTo} isVisible={visible} - onMouseEnter={onMouseEnter} - onMouseLeave={onMouseLeave} + onMouseEnter={triggerAction === 'hover' && onMouseEnter} + onMouseLeave={triggerAction === 'hover' && onMouseLeave} + onPopperMouseEnter={triggerAction === 'hover' && onMouseEnter} + onPopperMouseLeave={triggerAction === 'hover' && onMouseLeave} + onFocus={triggerAction === 'hover' && onFocus} + onBlur={triggerAction === 'hover' && onBlur} positionModifiers={positionModifiers} distance={distance} placement={position} - onTriggerClick={onTriggerClick} + onTriggerClick={triggerAction === 'click' && onTriggerClick} onDocumentClick={onDocumentClick} onDocumentKeyDown={onDocumentKeyDown} enableFlip={enableFlip} diff --git a/packages/react-core/src/components/Popover/examples/PopoverHover.tsx b/packages/react-core/src/components/Popover/examples/PopoverHover.tsx index 103729bfb05..0ed28b4fd80 100644 --- a/packages/react-core/src/components/Popover/examples/PopoverHover.tsx +++ b/packages/react-core/src/components/Popover/examples/PopoverHover.tsx @@ -4,7 +4,7 @@ import { Popover, Button } from '@patternfly/react-core'; export const PopoverHover: React.FunctionComponent = () => (
Popover header
} bodyContent={
This popover opens on hover.
}