fix(popover): popover prevents click action on the page

AxaFrance · Jul 22, 2020 · c6d0ac6 · c6d0ac6
2 parents 463594c + ac6153d
commit c6d0ac6
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 34 deletions.
diff --git a/packages/popover/src/Popover.js b/packages/popover/src/Popover.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Constants } from '@axa-fr/react-toolkit-core';
 import PopoverBase from './PopoverBase';
@@ -7,7 +7,6 @@ import PopoverModes from './PopoverModes';
 
 const propTypes = {
   ...Constants.propTypes,
-  title: PropTypes.string,
   children: PropTypes.any,
   placement: PropTypes.oneOf([
     PopoverPlacements.top,
@@ -28,71 +27,96 @@ const defaultProps = {
 export const PopoverClick = props => {
   const { children, placement, className, classModifier } = props;
 
+  const wrapperRef = useRef(null);
   const [isOpen, setOpen] = useState(false);
   const [isHover, setHover] = useState(false);
+  const [isPopoverHover, setPopoverHover] = useState(false);
 
-  useEffect(() => {
-    const body = window.document.getElementsByTagName('body')[0];
-    body.addEventListener('click', click);
+  const handleClickOutside = event => {
+    if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+      setOpen(false);
+      document.removeEventListener('click', handleClickOutside);
+    }
+  };
+
+  const handleClick = event => {
+    if (isPopoverHover) {
+      event.stopPropagation();
+      return;
+    }
 
-    return () => {
-      body.removeEventListener('click', click);
-    };
-  });
+    const shouldOpen = !isOpen && isHover;
+    setOpen(shouldOpen);
 
-  const click = event => {
-    setOpen(!isOpen && isHover);
-    event.stopPropagation();
+    if (shouldOpen) {
+      document.addEventListener('click', handleClickOutside);
+    }
   };
 
-  const enter = () => {
+  const handleMouseEnter = () => {
     setHover(true);
   };
 
-  const leave = () => {
+  const handleMouseLeave = () => {
     setHover(false);
   };
 
+  const handleMouseEnterPopover = () => {
+    setPopoverHover(true);
+  };
+
+  const handleMouseLeavePopover = () => {
+    setPopoverHover(false);
+  };
+
   return (
-    <button
+    <div
+      role="button"
+      tabIndex="0"
+      ref={wrapperRef}
       className="af-popover__wrapper"
-      type="button"
-      onMouseEnter={enter}
-      onMouseLeave={leave}
-      onClick={click}>
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onKeyDown={handleClick}
+      onClick={handleClick}>
       <PopoverBase
+        onMouseEnter={handleMouseEnterPopover}
+        onMouseLeave={handleMouseLeavePopover}
         isOpen={isOpen}
         placement={placement}
         className={className}
         classModifier={classModifier}>
         {children}
       </PopoverBase>
-    </button>
+    </div>
   );
 };
 
 export const PopoverOver = props => {
   const { children, placement, className, classModifier } = props;
   const [isOpen, setOpen] = useState(false);
 
-  const enter = () => {
+  const handleMouseEnter = () => {
     setOpen(true);
   };
 
-  const leave = () => {
+  const handleMouseLeave = () => {
     setOpen(false);
   };
 
   return (
-    <span onMouseEnter={enter} onMouseLeave={leave}>
+    <div
+      className="af-popover__wrapper"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}>
       <PopoverBase
         isOpen={isOpen}
         placement={placement}
         className={className}
         classModifier={classModifier}>
         {children}
       </PopoverBase>
-    </span>
+    </div>
   );
 };
 

diff --git a/packages/popover/src/PopoverBase.js b/packages/popover/src/PopoverBase.js
@@ -74,15 +74,20 @@ export const AnimatedPopover = props => {
   const componentClassName = ClassManager.getComponentClassName(
     className,
     classModifier,
-    defaultClassName,
+    defaultClassName
   );
 
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     modifiers: [
-      { name: 'arrow', options: { element: arrowElement } },
+      {
+        name: 'arrow',
+        options: {
+          element: arrowElement,
+        },
+      },
       {
         name: 'offset',
         options: {
@@ -111,9 +116,7 @@ export const AnimatedPopover = props => {
           data-popper-placement={placement}
           className="af-popover__container-pop"
           {...attributes.popper}>
-          <div>
-            {children}
-          </div>
+          <div>{children}</div>
           <div
             ref={setArrowElement}
             style={styles.arrow}

diff --git a/packages/popover/src/popover.scss b/packages/popover/src/popover.scss
@@ -1,17 +1,19 @@
 @import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
 
-$size-arrow: 16px;
+$arrow-size: 16px;
 $arrow-offset: -4px;
 $padding-popover: 0.5rem;
 
 .af-popover {
   &__wrapper {
+    display: inline-block;
     background: inherit;
     border: 0;
     padding: 0;
   }
 
   &__container {
+    cursor: initial;
     display: inline-block;
 
     &-pop {
@@ -43,16 +45,16 @@ $padding-popover: 0.5rem;
     }
 
     .af-popover__arrow {
-      width: $size-arrow;
-      height: $size-arrow;
+      width: $arrow-size;
+      height: $arrow-size;
       position: absolute;
       z-index: -1;
 
       &::before {
         content: '';
         background: $color-azur;
-        width: $size-arrow;
-        height: $size-arrow;
+        width: $arrow-size;
+        height: $arrow-size;
         transform: rotate(45deg);
         position: absolute;
       }