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:

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? – Pragati Jain Oct 22 at 4:53
  • No default value; v.petType is 'undefined' when I debug it in the setType function, when it runs on load. – Gabriel Rivera Oct 22 at 13:29
  • Okay, can you please debug component.get("v.newPet").Type__c in handleShowModal method. – Pragati Jain Oct 22 at 15:51

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.