trigger popover on focus, minor changes

patternfly · Jul 18, 2023 · 8a0d617 · 8a0d617
1 parent af88c4d
commit 8a0d617
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 36 deletions.
diff --git 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<PopoverProps> = ({
   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<PopoverProps> = ({
   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<PopoverProps> = ({
     }
   };
   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<PopoverProps> = ({
     }
   };
 
-  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<PopoverProps> = ({
         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<PopoverProps> = ({
       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<PopoverProps> = ({
     >
       <PopoverArrow />
       <PopoverContent>
-        {showClose && variant === 'click' && (
+        {showClose && triggerAction === 'click' && (
           <PopoverCloseButton onClose={closePopover} aria-label={closeBtnAriaLabel} />
         )}
         {headerContent && (
@@ -500,12 +509,16 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         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
@@ -4,7 +4,7 @@ import { Popover, Button } from '@patternfly/react-core';
 export const PopoverHover: React.FunctionComponent = () => (
   <div style={{ margin: '50px' }}>
     <Popover
-      variant="hover"
+      triggerAction="hover"
       aria-label="Hoverable popover"
       headerContent={<div>Popover header</div>}
       bodyContent={<div>This popover opens on hover.</div>}