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;
                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" 
        <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>
        <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 isTrue="{!v.showDogBreeds == true}">
            <lightning:inputField fieldName="DogBreed__c" aura:id="dogBreed" onchange="{!c.setDogBreed}"/>
        <aura:if isTrue="{!v.showOtherBreed == true}">
            <lightning:inputField fieldName="OtherBreed__c" aura:id="otherBreed"/>
        <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" />


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);

    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:

enter image description here

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?

  • debug the value of v.petType. Do you have any default value for Type__c Or passing any value to component for this field? Oct 22 '18 at 4:53
  • No default value; v.petType is 'undefined' when I debug it in the setType function, when it runs on load. Oct 22 '18 at 13:29
  • Okay, can you please debug component.get("v.newPet").Type__c in handleShowModal method. Oct 22 '18 at 15:51

Not sure if this is too late, but you cannot call controller methods using this

You can use 2 options

  1. move the method to helper.
  2. call controller method using $A.enqueueAction(component.get("c. determineBreedsOptions"));

Second option will be asynchronous

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.