7

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.

enter image description here 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

enter image description here

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

  • Any chance you could post the Stack Trace as well? – Folkert May 30 '18 at 10:44
  • Stack Trace added @Folkert – A.Bretto May 30 '18 at 12:03
  • why do you save the returned reference to the modal as an array of components? – Itai Shmida Jun 3 '18 at 6:41
  • unable "component.find('overlayPanel')" inside the modal body. so we are storing an instance of it as an attribute to use it onclick of the button inside the modal body. – A.Bretto Jun 4 '18 at 6:28
0

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 don't use a component attribute to store the modal reference but a temporary attribute/expando on component:

.then(function (overlay) { 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:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.