Not able to trigger event of parent application on click of Child application plugged-in using IFrame

Question

I have One application created using Ember JS. Inside that I have plugined another application using IFrame created using react JS. I wanted to hide dropdown rendered from parent application by clicking inside IFrame where Child Application is rendered.

I tried one way in which I added 'click' event on the Document of the child element and using CSS I am able to hide the dropdown but not able to switch the flag state of the dropdown component of the parent application. I have added code snippet of the useEffect which i have added inside the child appliaction where I am handling click event.

As in this way I am not able to maintain consistency for Flag states of parent application through which Dropdown component is conditionally rendered.

Can anyone provide a feasible solution to achieve this scenario so that I an manage ClickOutside event applied on the dropdown component of the parent application and can able to manage show and hide feature even on the click of Child application rendered inside Iframe.

useEffect(() => { document.body.addEventListener('click', (e) => { const popup = window.parent.document.querySelector('.popover.bs-popover-top.show');

    if (popup) {
        popup.style.display = 'none';
    }
});

Added this useEffect inside child Application so that to handle click event for Child application.