diff --git a/src/components/PopoverProvider/index.js b/src/components/PopoverProvider/index.js index efa230d920d5..20ad18f93c7d 100644 --- a/src/components/PopoverProvider/index.js +++ b/src/components/PopoverProvider/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import lodashGet from 'lodash/get'; const propTypes = { children: PropTypes.node.isRequired, @@ -22,7 +23,9 @@ function PopoverContextProvider(props) { if (!activePopoverRef.current || (anchorRef && anchorRef !== activePopoverRef.current.anchorRef)) { return; } + activePopoverRef.current.close(); + lodashGet(activePopoverRef, 'current.onCloseCallback', () => {})(); activePopoverRef.current = null; setIsOpen(false); }, []); @@ -106,6 +109,7 @@ function PopoverContextProvider(props) { closePopover(activePopoverRef.current.anchorRef); } activePopoverRef.current = popoverParams; + lodashGet(activePopoverRef, 'current.onOpenCallback', () => {})(); setIsOpen(true); }, [closePopover], diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index d35637958f1d..b7ebe29688d0 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -34,6 +34,8 @@ function Popover(props) { ref: props.withoutOverlayRef, close: props.onClose, anchorRef: props.anchorRef, + onCloseCallback: () => Modal.setCloseModal(null), + onOpenCallback: () => Modal.setCloseModal(() => props.onClose(props.anchorRef)), }); } else { props.onModalHide(); @@ -48,7 +50,6 @@ function Popover(props) { return; } firstRenderRef.current = false; - Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null); // We want this effect to run strictly ONLY when isVisible prop changes // eslint-disable-next-line react-hooks/exhaustive-deps