diff --git a/src/components/PopoverProvider/index.js b/src/components/PopoverProvider/index.js index efa230d920d5..a4c8eb10eb1c 100644 --- a/src/components/PopoverProvider/index.js +++ b/src/components/PopoverProvider/index.js @@ -22,7 +22,11 @@ function PopoverContextProvider(props) { if (!activePopoverRef.current || (anchorRef && anchorRef !== activePopoverRef.current.anchorRef)) { return; } + activePopoverRef.current.close(); + if (activePopoverRef.current.onCloseCallback) { + activePopoverRef.current.onCloseCallback(); + } activePopoverRef.current = null; setIsOpen(false); }, []); @@ -106,6 +110,9 @@ function PopoverContextProvider(props) { closePopover(activePopoverRef.current.anchorRef); } activePopoverRef.current = popoverParams; + if (popoverParams && popoverParams.onOpenCallback) { + popoverParams.onOpenCallback(); + } setIsOpen(true); }, [closePopover], diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 7287f36e7f2c..2036807e0df0 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -30,6 +30,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(); @@ -37,7 +39,6 @@ function Popover(props) { Modal.onModalDidClose(); } Modal.willAlertModalBecomeVisible(props.isVisible); - 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