+ Start a Discussion
louisa barrett 7louisa barrett 7 

Lightning recordEditForm onSuccess method is not being called if component is hidden in the onSubmit method

I have a lightning component that closes a case. Depending on the button that is pressed it either closes the case and leaves the workspace tab open or closes the case and the workspace tab.
All is working great until I set the visibility on the component. I don't want it to show if the case status is closed.
When the above criteria is set on the component, the onSuccess method is not called, only the onLoad and handleSumbit function that is called from the click event of the 2 save buttons. 
Is there a way I can set a visibility criteria on the component and still have the onSuccess method being called?

Component
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <lightning:workspaceAPI aura:id="workspace"/>
    <aura:attribute name="showSpinner" type="Boolean" default="true"/>
    <aura:attribute name="closeTab" type="Boolean" default="true"/>
    <aura:if isTrue="{!v.showSpinner}">
        <lightning:spinner />
    </aura:if>
    <div class="slds-box slds-theme_default">
        <div class="slds-text-title_bold">Close the Case</div>
        <lightning:recordEditForm aura:id="recordEditor"
                                  onload="{!c.handleLoad}"                                 
                                  onsuccess="{!c.handleSuccess}"
                                  recordId = "{!v.recordId}"
                                  objectApiName="Case">
            <lightning:messages />
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-2">
                    <lightning:inputField aura:id="fieldStatus" fieldName="Status" disabled="true" />
                    <lightning:inputField aura:id="field" fieldName="Fault_Type__c" />
                    <lightning:inputField aura:id="field" fieldName="Solution_Details__c" />                    
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning:inputField aura:id="field" fieldName="Fault_Category__c" disabled="true" />                    
                    <lightning:inputField aura:id="field" fieldName="Solution__c" />
                </div>                      
            </div>
            <div class="slds-m-top_medium">
                <lightning:button aura:id="button3" variant="neutral" name="Cancel" label="Cancel" onclick="{!c.handleCancel}" />
                <lightning:button aura:id="button2" variant="brand" type="button" name="save2" label="Close Case" onclick="{!c.handleSubmit}" />
                <lightning:button aura:id="button1" variant="brand" type="button" name="save" label="Close Case and Tab" onclick="{!c.handleSubmit}"/>                                
            </div>
        </lightning:recordEditForm>
    </div> 
</aura:component>
Controller
({
    handleLoad : function(component, event, helper) {
        console.log('handle handleLoad');
        component.find("fieldStatus").set("v.value", "Closed");
        component.set("v.showSpinner", false);
    },
    
    handleSubmit : function(component, event, helper) {
        event.preventDefault(); // Prevent default submit      
        component.find('recordEditor').submit(); // Submit form
        console.log('handle handleSubmit');
        if(event.getSource().getLocalId() == 'button2'){
            component.set("v.closeTab", false);
        }        
    },
    
    handleSuccess : function(component, event, helper) {
        console.log('record updated successfully'); 
        component.set("v.showSpinner", false);
        // Success! Prepare a toast UI message
        var resultsToast = $A.get("e.force:showToast");
        resultsToast.setParams({
            "title": "Case Saved",
            "message": "The case has been closed"
        });
        resultsToast.fire();
        var closeTab2 = component.get("v.closeTab");
        console.log(closeTab2);
       //Below should only fire if a specific lighting button was pressed
        if(closeTab2){           
            var workspaceAPI = component.find("workspace");
            console.log('closing tab');
            workspaceAPI.getFocusedTabInfo().then(function(response) {
                var focusedTabId = response.tabId;
                workspaceAPI.closeTab({tabId: focusedTabId});
            })
            .catch(function(error) {
                console.log(error);
            }); 
        }       
    },
    
    handleCancel: function(component, event, helper) {
        console.log('updated cancelled');
        component.find('field').forEach(function(f) {
            f.reset();
        });
    }
})

Thanks