Lightning:recordForm cancel button unresponsive

I’m building out some community features and one of them is like a related list with a new button. When the user presses the new button, I am launching a modal window with another custom component loaded that has the lightning:recordForm and shows the correct form fields for that user and the record type. This behavior I really like since it allows the administrators to change up the forms as they wish. The users are able to save their data, the window closes and the related list is updated with the new data.

However, if the user decides to hit the cancel button, nothing happens. I don’t see an event to capture or anything for me to work from in order to get the window to close. Is there something I’m missing to get this working?

// parent component that load component in modal

    var applicant = component.get("v.applicant");
    $A.createComponent(
        "c:ApplicantInfo_ModalForm",
        {
            "Applicant" : applicant,
            "recordTypeId" : applicant.recordTypeId 
        },
        function(content, status) {
            if (status === "SUCCESS") {
                modalBody = content;
                component.find('overlayLib').showCustomModal({
                    header: component.get("v.RelatedListLabel"),
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "mymodal",
                    closeCallback: function() {
                        console.log('You closed the modal!');
                        helper.loadData(component);
                    }
                })
            }                               
        });

// child component with applicant attribute

<lightning:recordForm
                      objectApiName="Custom_Object__c" 
                      recordTypeId="{!v.Applicant.recordTypeId}"
                      layoutType="Compact"
                      columns="2"
                      mode = "edit"
                      onload="{!c.handleLoad}"/>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

try to add oncancel event in your component.

    <lightning:recordForm
                      objectApiName="Custom_Object__c" 
                      recordTypeId="{!v.Applicant.recordTypeId}"
                      layoutType="Compact"
                      columns="2"
                      mode = "edit"
                      onload="{!c.handleLoad}"
                      oncancel="{!c.onCancel}"
                      />

In your component controller

onCancel: function(component, event, helper) {

// Handle the cancel here.

}

Method 2

I have noticed that the way recordId under the lightning:recordForm is referenced also effects the behavior of the cancel button. For example below approach wasn’t working when I put the component on opportunity record page:

<aura:attribute name="oppRec" type="Object" description="A simplified view 

record object to be displayed"/>
    <lightning:recordForm
                    recordId="{!if(v.oppRec.OpportunityId,v.oppRec.OpportunityId,'')}"....

However the cancel button started working when I changed above line to:

<lightning:recordForm
            recordId="{!if(v.recordId,v.recordId,'')}"

Note: the if condition was added in recordId to handle another error that was sometimes showing while loading page.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0