[SalesForce] Onchange Function for Lightning:inputField Automatically Runs (Causing an Error) when Loaded in a Modal

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?

Best Answer

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

Related Topic