I have a component that opens in a modal.
Modal/Button Markup
<lightning:overlayLibrary aura:id="overlayLib"/>
<lightning:button name="modal" label="Create Pet" onclick="{!c.handleShowModal}"/>
JS Which Opens the Modal
handleShowModal: function(component, evt, helper) {
var modalBody;
$A.createComponent("c:IFBPetCreate", {"record": component.get("v.newPet"),
"needsOwner": component.get("v.missingPetOwner"),
"isEU": component.get("v.isEuUser"),
"contList": component.get("v.contList"),
"isLead": component.get("v.isLead")},
function(content, status) {
if (status === "SUCCESS") {
modalBody = content;
component.find('overlayLib').showCustomModal({
header: "Application Confirmation",
body: modalBody,
showCloseButton: true,
cssClass: "mymodal",
closeCallback: function() {
alert('You closed the alert!');
}
})
}
});
},
Component Markup
<aura:component controller="CasePetList_Controller">
<aura:attribute name="record" type="Pet__c" required="true" />
<aura:attribute name="needsOwner" type="Boolean" default="true" />
<aura:attribute name="isLead" type="Boolean" default="true" />
<aura:attribute name="isEU" type="Boolean" default="false" />
<aura:attribute name="contList" type="List" required="true" />
<aura:attribute name="petType" type="string" />
<aura:attribute name="catBreed" type="string" />
<aura:attribute name="dogBreed" type="string" />
<aura:attribute name="showCatBreeds" type="Boolean" />
<aura:attribute name="showDogBreeds" type="Boolean" />
<aura:attribute name="showOtherBreed" type="Boolean" />
<lightning:recordEditForm aura:id="recordEditForm"
objectApiName="Pet__c">
<lightning:messages />
<aura:if isTrue="{!v.needsOwner == true}">
<div class="slds-form-element">
<lightning:select name="pet" label="Pet Owner" aura:id="ownrselect" value="{!v.record.Pet_Owner__c}">
<aura:iteration items="{!v.contList}" var="c">
<option value="{!c.Id}">{!c.Name}</option>
</aura:iteration>
</lightning:select>
</div>
<br/>
</aura:if>
<lightning:inputField fieldName="Name" />
<lightning:inputField fieldName="Type__c" aura:id="petType" onchange="{!c.setPetType}"/>
<aura:if isTrue="{!v.showCatBreeds == true}">
<lightning:inputField fieldName="CatBreed__c" aura:id="catBreed" onchange="{!c.setCatBreed}"/>
</aura:if>
<aura:if isTrue="{!v.showDogBreeds == true}">
<lightning:inputField fieldName="DogBreed__c" aura:id="dogBreed" onchange="{!c.setDogBreed}"/>
</aura:if>
<aura:if isTrue="{!v.showOtherBreed == true}">
<lightning:inputField fieldName="OtherBreed__c" aura:id="otherBreed"/>
</aura:if>
<lightning:inputField fieldName="WeightLBS__c" />
<lightning:inputField fieldName="Birthdate__c" />
<lightning:inputField fieldName="Sex_of_Pet__c" />
<lightning:inputField fieldName="Aggressive__c" />
<lightning:inputField fieldName="Active__c" />
</lightning:recordEditForm>
</aura:component>
Component Controller
setPetType: function (component) {
console.log('setPetType is running');
var petType = component.get("v.petType");
petType = component.find("petType").get("v.value");
component.set("v.petType", petType);
this.determineBreedsOptions(component);
},
setCatBreed: function (component, event, helper) {
var petType = component.get("v.catBreed");
catBreed = component.find("catBreed").get("v.value");
component.set("v.catBreed", catBreed);
},
setDogBreed: function (component, event, helper) {
var dogBreed = component.get("v.dogBreed");
dogBreed = component.find("dogBreed").get("v.dogBreed");
component.set("v.dogBreed", dogBreed);
},
determineBreedsOptions: function (component) {
var petType = component.get("v.petType");
var showCatBreeds = component.get("v.showCatBreeds");
var showDogBreeds = component.get("v.showCatBreeds");
var showOtherBreed = component.get("v.showCatBreeds");
this.showTypeBreeds(petType, showCatBreeds, showDogBreeds, showOtherBreed);
},
showTypeBreeds : function (petType, showCatBreeds, showDogBreeds, showOtherBreed) {
var catBreed = component.get("v.catBreed");
var dogBreed = component.get("v.dogBreed");
if(petType == 'Cat'){
showCatBreeds = true;
component.set("v.showCatBreeds", showCatBreeds);
showDogBreeds = false;
component.set("v.showDogBreeds", showDogBreeds);
showOtherBreed = false;
component.set("v.showOtherBreed", showOtherBreed);
} else if(petType == 'Dog') {
showCatBreeds = false;
component.set("v.showCatBreeds", showCatBreeds);
showDogBreeds = true;
component.set("v.showDogBreeds", showDogBreeds);
showOtherBreed = false;
component.set("v.showOtherBreed", showOtherBreed);
} else if(petType == 'Other' || petType == 'Cat' && catBreed == 'Other' || petType == 'Dog' && dogBreed == 'Other'){
showCatBreeds = false;
component.set("v.showCatBreeds", showCatBreeds);
showDogBreeds = false;
component.set("v.showDogBreeds", showDogBreeds);
showOtherBreed = true;
component.set("v.showOtherBreed", showOtherBreed);
}
},
The setType
function is only the onchange atrribute for the Type lightning:inputField; choosing a value there should be the only time that funtion runs. However, it also mysteriously runs when I click the button which fires the handleShowModal
function to open the modal and load the component within it.
That results at the same time – when I click that button – in the following error:
Why does the setType
function prematurely and automatically run when the component is loaded in the modal?
How do I prevent this?
What is the workaround if unpreventable?
Best Answer
Not sure if this is too late, but you cannot call controller methods using this
You can use 2 options
Second option will be asynchronous