diff --git a/packages/popover/src/Popover.js b/packages/popover/src/Popover.js
index 396579f74..e3b004ad1 100644
--- 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,46 +27,68 @@ 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 (
-
+
);
};
@@ -75,16 +96,19 @@ 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 (
-
+
{
classModifier={classModifier}>
{children}
-
+
);
};
diff --git a/packages/popover/src/PopoverBase.js b/packages/popover/src/PopoverBase.js
index 8ecb9ab12..2fccd80bd 100644
--- a/packages/popover/src/PopoverBase.js
+++ b/packages/popover/src/PopoverBase.js
@@ -74,7 +74,7 @@ export const AnimatedPopover = props => {
const componentClassName = ClassManager.getComponentClassName(
className,
classModifier,
- defaultClassName,
+ defaultClassName
);
const [referenceElement, setReferenceElement] = useState(null);
@@ -82,7 +82,12 @@ export const AnimatedPopover = props => {
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}>
-
- {children}
-
+ {children}