From 421d0837038572ea5137dde6e4392d3fa85e054f Mon Sep 17 00:00:00 2001 From: Xavier Balloy <686305+xballoy@users.noreply.github.com> Date: Tue, 30 Jun 2020 10:25:43 +0200 Subject: [PATCH 1/5] fix(popover): do not stopPropagation on body click --- packages/popover/src/Popover.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/popover/src/Popover.js b/packages/popover/src/Popover.js index 396579f74..74ef43457 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, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import { Constants } from '@axa-fr/react-toolkit-core'; import PopoverBase from './PopoverBase'; @@ -28,21 +28,25 @@ 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); 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.addEventListener('click', handleClickOutside); return () => { - body.removeEventListener('click', click); + document.removeEventListener('click', handleClickOutside); }; - }); + }, [wrapperRef]); - const click = event => { + const click = () => { setOpen(!isOpen && isHover); - event.stopPropagation(); }; const enter = () => { @@ -55,6 +59,7 @@ export const PopoverClick = props => { return ( - + `; diff --git a/packages/popover/src/Popover.js b/packages/popover/src/Popover.js index 917c0a3af..e3b004ad1 100644 --- a/packages/popover/src/Popover.js +++ b/packages/popover/src/Popover.js @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, 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'; @@ -30,48 +30,65 @@ export const PopoverClick = props => { const wrapperRef = useRef(null); const [isOpen, setOpen] = useState(false); const [isHover, setHover] = useState(false); + const [isPopoverHover, setPopoverHover] = useState(false); - useEffect(() => { - const handleClickOutside = event => { - if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { - setOpen(false); - } - }; - - document.addEventListener('click', handleClickOutside); - return () => { + const handleClickOutside = event => { + if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { + setOpen(false); document.removeEventListener('click', handleClickOutside); - }; - }, [wrapperRef]); + } + }; + + const handleClick = event => { + if (isPopoverHover) { + event.stopPropagation(); + return; + } - const click = () => { - setOpen(!isOpen && isHover); + const shouldOpen = !isOpen && isHover; + setOpen(shouldOpen); + + 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 ( - + ); }; @@ -79,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}
.af-popover__arrow { - bottom: -4px; + bottom: $arrow-offset; } [data-popper-placement^='bottom'] > .af-popover__arrow { - top: -4px; + top: $arrow-offset; } [data-popper-placement^='right'] > .af-popover__arrow { - left: -12px; + left: $arrow-offset; } [data-popper-placement^='left'] > .af-popover__arrow { - right: 4px; + right: $arrow-offset; } } From ac6153dbadd5e9b7d327e6d39725abe9d3544fc1 Mon Sep 17 00:00:00 2001 From: Xavier Balloy <686305+xballoy@users.noreply.github.com> Date: Wed, 22 Jul 2020 09:19:52 +0200 Subject: [PATCH 5/5] test: fix snapshots --- packages/help/src/__snapshots__/Help.spec.js.snap | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/help/src/__snapshots__/Help.spec.js.snap b/packages/help/src/__snapshots__/Help.spec.js.snap index a228943b9..fe51af154 100644 --- a/packages/help/src/__snapshots__/Help.spec.js.snap +++ b/packages/help/src/__snapshots__/Help.spec.js.snap @@ -1,14 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` Render Should render Help component 1`] = ` -
Render Should render Help component 1`] = `
-
+ `;