How to get aura component from handler function without component parameter available

Question

I have a lightningOverlayLibrary that generates an LWC component in its body. The LWC dispatches a close event that the aura component handles.

The aura component needs to close the lightningOverlayLibrary but the handler does not have the instance of the component available as a parameter so it can't close it.

I need to either get the component, or get the lightningOverlayLibrary from the aura handler to close it. How can that be done?

Aura Component:

<aura:component implements="lightning:actionOverride,force:hasRecordId,lightning:hasPageReference">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:overlayLibrary aura:id="overlayLib" />
</aura:component>

Aura Controller:

({
    doInit: function(component, event, helper) {
        $A.createComponents([
            ["c:opportunityActionsOverrideLwc",{ 
                recordId: component.get('v.recordId'),
                recordTypeId: component.get("v.pageReference").state.recordTypeId,
                oncancel: component.getReference("c.handleCancel"),
            }],
        ],
        function(components, status) {
            if (status === "SUCCESS") {
                const form = components[0];
                component.find('overlayLib').showCustomModal({
                    header: "New Opportunity",
                    body: form,
                    showCloseButton: true,
                    cssClass: "slds-modal_medium",
                })
            }
        });
    },
    handleCancel: function(cancelEvent) {
        // I need to either get the component instance here OR the overlayLibrary to close it
        console.log('event:');
        console.log(JSON.parse(JSON.stringify(cancelEvent)));
    }
})

LWC Controller:

handleCancel(event) {
    console.log('canceling');
    this.dispatchEvent(new CustomEvent('cancel'));
}

Answer 1

In your controller, you want to cache the modal instance when you call showCustomModal() and store it as a component attribute. Like this:

var modalPromise = component.find("overlayLib").showCustomModal({
    header: "Sample Modal",
    body: modalBody,
    footer: modalFooter,
    showCloseButton: true,
    cssClass: "cMyComponent mymodal slds-modal_medium"
});
component.set("v.modalPromise", modalPromise);

Then, when you want to close the modal, you can get a reference to the modal instance, and call close on it. Like so:

component.get("v.modalPromise").then((modal) => {
    modal.close();
});