lightning:overlayLibrary Modal not closing in LEX Tab

Question

I've been using lightning:overlayLibrary Modal in a component which is referred in a Lightning Page and in a Lightning Tab. I'm using a custom button to close the modal which performs a overlayPromise.close() method of the promise returned by lightning:overlayLibrary. I am able to close the modal by this way when the component is in Lightning Page. But, Fails to close the modal when the component is in a Lightning Tab.

And when I try to do the close action in the browser console, the modal gets closed. It's weird.

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:overlayLibrary aura:id="overlayLib"/>
<aura:attribute name="overlayPanel" type="Aura.Component[]" />
<lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>

Controller:

  ({
        handleShowModal: function(component, evt, helper) {
            var modalBody;
            $A.createComponent("lightning:button", {
                "label" : 'Close Modal',
                "onclick" : component.getReference("c.closeModal")
            },function(content, status) {
                if (status === "SUCCESS") {
                    modalBody = content;
                    component.find('overlayLib').showCustomModal({
                        header: "Overlay Modal",
                        body: modalBody, 
                        showCloseButton: true,
                        closeCallback: function() {
                            console.log('You closed the alert!');
                        }
                    }).then(function (overlay) {
                        component.set('v.overlayPanel', overlay);
                    });

                }

            });
        },
        closeModal : function(component,event,helper){
            console.log('closing');
            var overlayPanel = component.get('v.overlayPanel');
            console.log('overlayPanel',overlayPanel);
            overlayPanel[0].close();

        }
    })

Additional Info: The same scenario throws the following error when used in packaging Orgs

Access Check Failed! Component.method():'markup://ui:close' is not visible to 'markup://Org Namespace-URL

Stack Trace:

resolve()@https: //my-dev-ed.lightning.force.com/components/lightning-overlay-utils.js:200:33 OverlayPanel.close()@https: //my-dev-ed.lightning.force.com/components/lightning-overlay-utils.js:199:16 Object.closeCalendarModal()@https: /my-dev-ed.lightning.force.com/one/components/my_ns/Calendar.js:116:29 eval()@https ://my-dev-ed.lightning.force.com/one/components/my_ns/Calendar.js:137:28 Object.destroyHelper()@https ://my-dev-ed.lightning.force.com/one/components/my_ns/Calendar.js:139:49

Answer 1

I ran in this issue today as well.

For me, creating a custom modal footer component instead of using the promise returned object worked also in tab only context.

The approach is detailed in the docs with c:modalFooter and in this answer which also contains discussion on debugging details and if this method is really, really the same as close() on the promise return object.

Personally, I would also prefer to work with the object returned by the promise.

For what it's worth, I didn't use a component attribute to store the modal reference but a temporary attribute/expando on component:

     component.myOverlay =  overlay
}

Access check fails in this instance as well.

What ultimately worked for me in both contexts was this approach using an Aura.Action attribute instead of an expando / cmp array attribute and calling it this way:

    Promise.resolve(component.get('v.modalPromise')).then(
      function (modal) {
          modal.close();
      }
  );