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: {!v.contact.Contact.FirstName} {!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: {!item.Contact.FirstName} {!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>
lightning:overlayLibraryif 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