0

I'm working on a Lightning Component that open a modal when user click on a button. This modal have the close button on the upper-right side and also two custom button, "Cancel" and "Save". By clicking on one or the other button, the modal closes but an error window pop with this message:

[Cannot read property 'offsetWidth' of null]
getDomWidth()@https://mydomain--1dev.lightning.force.com/components/lightning-datatable.js:3134:18
getAvailableWidthFromDom()@https://mydomain--1dev.lightning.force.com/components/lightning-datatable.js:3140:10
getExpectedTableWidth()@https://mydomain--1dev.lightning.force.com/components/lightning-datatable.js:3035:26
adjustColumnsSize()@https://mydomain--1dev.lightning.force.com/components/lightning-datatable.js:2968:30
privateWidthObserver.lightningInputUtils.debounce()@https://mydomain--1dev.lightning.force.com/components/lightning-datatable.js:4301:99
eval()@https://mydomain--1dev.lightning.force.com/components/lightning-input-utils.js:154:12

I try several solution to close my modal in my helper but they all launch this error:

saveRecords : function(component, event, helper){
    var saveAction = component.get("c.saveRecord");
    saveAction.setParams({
        opp: component.get("v.opp"),
        oppCnt: component.get("v.contact"),
        oppCntList: component.get("v.OppContRoles")
    });
    saveAction.setCallback(this, function(a){
        if(a.getState() == "SUCCESS"){
            var navEvt = $A.get("e.force:navigateToSObject");
            navEvt.setParams({
                "recordId": component.get("v.recordId"),
                "slideDevName": "related"
            });
            $A.get("e.force:refreshView").fire();
            navEvt.fire();

            helper.showSuccessToast(component, event, helper);
        }
        else{
            component.set("v.errorMessage",true);
            var btnClicked = event.getSource();
            btnClicked.set("v.disabled",false);
        }
    });
    $A.enqueueAction(saveAction);
},

Also this one:

var dismissActionPanel = $A.get("e.force:closeQuickAction"); 
            dismissActionPanel.fire(); 

And this one:

component.find("overlayLib").notifyClose();

I didn't find other possible way to close my modal and prevent this error.

Thank you in advance,

Miopau

EDIT : Here is my cmp code:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome,lightning:actionOverride" controller="SMB_Opp_Edit_Account_Contact_Handler" >
<aura:handler name="init" value="{!this}" action="{!c.init}" />

<lightning:overlayLibrary aura:id="overlayLib"/> 
<!-- General variables -->
<aura:attribute name="recordId" type="String" />
<aura:attribute name="opp" type="Opportunity" />
<aura:attribute name="contact" type="OpportunityContactRole"/>
<aura:attribute name="OppContRoles" type="String[]" />
<aura:attribute name="legalPicklists" type="String[]" />
<aura:attribute name="legalValue" type="String" />
<aura:attribute name="industryPicklists" type="String[]" />
<aura:attribute name="industryValue" type="String" />
<aura:attribute name="salutationPicklists" type="String[]" />
<aura:attribute name="errorMessage" type="Boolean"/>
<aura:handler name="change" value="{!v.opp}" action="{!c.checkAccountData}"/>


<form class="slds-form--stacked">
    <div class="slds-col modal-header slds-modal__header">
        <h2 class="title slds-text-heading--medium">Account and Contact</h2>
        <h3 class="title slds-text-heading--small">Edit Account and Contact informations</h3>
    </div>
    <div class="slds-col modal-body scrollable slds-p-around--medium" >
        <div class="slds-grid" style="margin-bottom:15px">
            <div class="slds-col" style="margin:10px">
                <div class="slds-card__header slds-grid">
                    <header class="slds-media slds-media_center slds-has-flexi-truncate">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon-standard-account" title="account">
                                <lightning:icon iconName="standard:account" size="medium"/>
                            </span>
                        </div>

                        <h2 class="slds-card__header-title">                       
                            <span class="slds-text-heading_small"><b>Account Informations</b></span>                       
                        </h2>
                    </header>
                </div>

                <lightning:select   label="Select a legal form" aura:id="accForm" value="{!v.opp.Account.Legal_Form__c}">
                    <option value=""> -- None --</option>
                    <aura:iteration items="{!v.legalPicklists}" var="item">
                        <option text="{!item.label}" value="{!item.value}"></option> 
                    </aura:iteration>
                </lightning:select>

                <lightning:input type="text" label="Commercial/Trading Name" value="{!v.opp.Account.CommercialTradingName__c}" aura:id="accForm" />
                <lightning:input type="text" label="Compagny Name" value="{!v.opp.Account.Name}" aura:id="accForm" required="true"/>
                <lightning:input type="text" label="Merchant Category Code" value="{!v.opp.Account.CodeMCC__c}" aura:id="accForm"/>
                <lightning:input type="Integer" maxlength="18" label="Company Turnover" value="{!v.opp.Account.Company_Turnover_Y_1__c}" aura:id="accForm" />

                <lightning:select   label="Select a Market Segment" aura:id="accForm" value="{!v.opp.Account.Industry}" >
                    <option value=""> -- None --</option>
                    <aura:iteration items="{!v.industryPicklists}" var="item">
                        <option text="{!item.label}" value="{!item.value}"></option> 
                    </aura:iteration>
                </lightning:select>
                <lightning:input type="text" label="VAT Number" maxlength="9" value="{!v.opp.Account.VAT_Number__c}" placeholder="xxxxxxxxx" aura:id="accForm" pattern="[0-9]{9}"/>
                <lightning:input type="text" maxlength="11" label="National Tax Number" value="{!v.opp.Account.National_Tax_Number__c}" aura:id="accForm" />
                <br/>
                <p><b>Address:</b></p>
                <lightning:input type="text" label="Street" value="{!v.opp.Account.BillingStreet}" aura:id="accForm" />
                <lightning:input type="text" label="Post Code" value="{!v.opp.Account.BillingPostalCode}" aura:id="accForm" />
                <lightning:input type="text" label="City" value="{!v.opp.Account.BillingCity}" aura:id="accForm" />
                <br/>
                <lightning:input type="tel" label="Phone" value="{!v.opp.Account.Phone}" aura:id="accForm" />
                <lightning:input type="email" label="Company Email" value="{!v.opp.Account.Company_Email__c}" aura:id="accForm" pattern="([a-z0-9][-a-z0-9_\+\.]*[a-z0-9])@([a-z0-9][-a-z0-9\.]*[a-z0-9]\.(arpa|root|aero|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|([0-9]{1,3}\.{3}[0-9]{1,3}))" messageWhenPatternMismatch="Incorrect Email Format"/>
                <lightning:input type="text" maxlength="14" label="Creditor ID" value="{!v.opp.Account.Creditor_ID__c}" aura:id="accForm" />
                <lightning:input type="text"  maxlength="4" label="Founding Year" value="{!v.opp.Account.Founding_year__c}" placeholder="xxxx" aura:id="accForm" pattern="[12][890][0-9][0-9]"  messageWhenPatternMismatch="Year is invalid"/>
                <lightning:input type="Integer" maxlength = "12" label="BIC" value="{!v.opp.Account.BIC__c}" aura:id="accForm" />
                <lightning:input type="text" maxlength="30" label="IBAN" value="{!v.opp.Account.IBAN__c}" placeholder="DExxxxxxxxxxxxxxxxxxxx" aura:id="accIBAN" pattern="DE[0-9]{20}" messageWhenPatternMismatch="Your IBAN format does not meet the German standard."/>
                <lightning:input type="text" maxlength="30" label="IBAN Debit" value="{!v.opp.Account.IBAN_Debit__c}" placeholder="DExxxxxxxxxxxxxxxxxxxx" aura:id="accForm" pattern="DE[0-9]{20}" messageWhenPatternMismatch="Your IBAN format does not meet the German standard."/>
                <lightning:input type="text" label="Bank Account Owner" value="{!v.opp.Account.Bank_Account__c}" aura:id="accForm" required="true"/>

                <br/>

                <aura:if isTrue="{!v.contact != null}">
                    <div class="slds-card__header slds-grid slds-border_top">
                        <header class="slds-media slds-media_center slds-has-flexi-truncate">
                            <div class="slds-media__figure">
                                <span class="slds-icon_container slds-icon-standard-contact" title="contact">
                                    <lightning:icon iconName="standard:contact" size="medium"/>
                                </span>
                            </div>
                            <div class="slds-media__body">
                                <h2 class="slds-card__header-title">                       
                                    <span class="slds-text-heading_small"><b>Primary Contact:&nbsp;{!v.contact.Contact.FirstName}&nbsp;{!v.contact.Contact.LastName}</b></span>                       
                                </h2>
                            </div>
                        </header>
                    </div>


                    <lightning:select   label="Salutation" aura:id="accForm" value="{!v.contact.Contact.Salutation}" required="true">
                        <option value=""> -- None --</option>
                        <aura:iteration items="{!v.salutationPicklists}" var="item">
                            <option text="{!item.label}" value="{!item.value}"></option> 
                        </aura:iteration>
                    </lightning:select>

                    <lightning:input type="text" label="First Name" value="{!v.contact.Contact.FirstName}" aura:id="accForm"/>
                    <lightning:input type="text" label="Last Name" value="{!v.contact.Contact.LastName}" aura:id="accForm" required="true"/>
                    <lightning:input type="date" label="Birthdate" value="{!v.contact.Contact.Birthdate}" aura:id="accForm" required="true"/>
                    <lightning:input type="text" maxlength="128" label="Job Title" value="{!v.contact.Contact.Title}" aura:id="accForm"/>
                    <lightning:input type="text" maxlength="128" label="Place of Birth" value="{!v.contact.Contact.Place_of_Birth__c}" aura:id="accForm"/>
                    <lightning:input type="text" maxlength="128" label="Nationality" value="{!v.contact.Contact.Nationality__c}" aura:id="accForm"/>
                    <aura:set attribute="else">
                        <div class="slds-card__header slds-grid slds-border_top">
                            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                                <div class="slds-media__figure">
                                    <span class="slds-icon_container slds-icon-utility-error" title="Error">
                                        <lightning:icon iconName="utility:error" size="medium" variant="Error"/>
                                    </span>
                                </div>
                                <div class="slds-media__body">
                                    <h2 class="slds-card__header-title">                       
                                        <span class="slds-text-heading_small"><b>You have no Primary Contact, please add one before trying to update informations.</b></span>                       
                                    </h2>
                                </div>
                            </header>
                        </div>
                    </aura:set>
                </aura:if>
                <aura:iteration items="{!v.OppContRoles}" var="item">
                    <aura:if isTrue="{!item.taux != null}">
                        <br/>
                        <div class="slds-card__header slds-grid slds-border_top">
                            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                                <div class="slds-media__figure">
                                    <span class="slds-icon_container slds-icon-standard-contact" title="contact">
                                        <lightning:icon iconName="standard:contact" size="medium"/>
                                    </span>
                                </div>
                                <div class="slds-media__body">
                                    <h2 class="slds-card__header-title">                       
                                        <span class="slds-text-heading_small"><b>Owner Contact:&nbsp;{!item.Contact.FirstName}&nbsp;{!item.Contact.LastName}</b></span>                       
                                    </h2>
                                </div>
                            </header>
                        </div>

                        <lightning:select   label="Salutation" aura:id="accForm" value="{!item.Contact.Salutation}" required="true">
                            <option value=""> -- None --</option>
                            <aura:iteration items="{!v.salutationPicklists}" var="item">
                                <option text="{!item.label}" value="{!item.value}"></option> 
                            </aura:iteration>
                        </lightning:select>

                        <lightning:input type="text" label="First Name" value="{!item.Contact.FirstName}" aura:id="accForm"/>
                        <lightning:input type="text" label="Last Name" value="{!item.Contact.LastName}" aura:id="accForm" required="true"/>
                        <lightning:input type="date" label="Birthdate" value="{!item.Contact.Birthdate}" aura:id="accForm"/>
                        <lightning:input type="text" label="Job Title" value="{!item.Contact.Title}" aura:id="accForm"/>
                    </aura:if>
                </aura:iteration>
            </div>
        </div>
    </div>
</form>

<aura:if isTrue="{!v.errorMessage}">
    <span style="color:red;">Incorrect fields values, please update them before update records.</span>
</aura:if>
<div style="background-color:white;" class="slds-modal__footer slds-align_absolute-center">        
    <lightning:button variant="neutral" label="Cancel" onclick="{!c.cancel}" />      
    <lightning:button variant="brand" label="Save" aura:id="buttonSave" onclick="{!c.save}" />
</div>

  • Can you post complete code? do you have a table in your modal? It have tried your code for a simple modal and it works – Pranay Jaiswal Jul 10 '18 at 13:18
  • Here it is, I edit my post. – Gwaldhorf Miopau Jul 10 '18 at 13:20
  • It's not clear to me why you have lightning:overlayLibrary if you're not creating a modal from that? From the markup it looks like you're opening a quick action styled like a modal, but you want on finish of this component you want to close the quick action right? – tsalb Jul 11 '18 at 6:18
0

I'd try just show/hiding the modal using slds classes:

So the modal would look something like this

<div aura:id="myModal">
<div class="slds-modal__footer">
<lightning:button variant="neutral" label="Cancel" onclick="{!c.handleCancelModal}" />
</div>
</div>

and then the onclick would add slds-hide to it

handleCancelModal: function (component, event, helper) {
        var confirmmodal = component.find('myModal');
        $A.util.addClass(confirmmodal, 'slds-hide');
    },
  • Is this "way to do" a good way? I mean what if my users open the modal, then "close/hide it" and repeat this operation several times? I will have several modal open but hide? – Gwaldhorf Miopau Jul 10 '18 at 13:18
  • Depending on your use case, you can start with the modal hidden, and then use a remove class to show it, and hide it on cancel as shown above. That way, there should only every be one modal that you are creating/displaying. Any other buttons can just have handlers for any actions you need to take. I considered a child component but you can up needing events for communication and my modal use case was really just a click and move on, or cancel and go back scenario, so seemed easiest to go down this route so that it was all contained within the main component – BritishBoyinDC Jul 10 '18 at 13:44
  • Ok! It makes sense. I will consider it as an alternative solution if I can't find any way to resolve my problem because this will require some modifications but thank you very much! – Gwaldhorf Miopau Jul 10 '18 at 14:03

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.