Call LWC from Aura , reset fields doesn't work

Question

I'm calling LWC from Aura component , (im overriding the standard new button )

<lightning-record-edit-form>
<lightning-input-field ... 
...
<lightning-button label={LWC_Cancel} size="medium" onclick={handleCancel}></lightning-button>
</lightning-record-edit-form>

LWC JS

handleCancel(event) {
        this.dispatchEvent(new CustomEvent('cancelportefeuille'));
    }

i'm sending the cancel to the aura so in aura

Aura HTML :

<aura:component
    implements="lightning:isUrlAddressable,flexipage:availableForAllPageTypes,lightning:actionOverride,force:lightningQuickAction"
    access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}" />
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChange}"/>
    <aura:attribute name="parentRecordId" type="String" />
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="actvType" type="String" />
    <lightning:navigation aura:id="navService"/>
    <lightning:workspaceAPI aura:id="workspace" /> 

    <c:activityPortefeuilleStandardList   oncancelportefeuille="{!c.handleCancel}"  recordId="{!v.parentRecordId}">
    </c:activityPortefeuilleStandardList>

</aura:component>

Aura JS :

({
    onPageReferenceChange: function (component, event, helper) {
        var pageRef = component.get("v.pageReference");
        console.log(JSON.stringify(pageRef));
        var state = pageRef.state; // state holds any query params
        console.log('state = '+JSON.stringify(state));
        var base64Context = state.inContextOfRef;
        console.log('base64Context = '+base64Context);
        if (base64Context.startsWith("1\.")) {
            base64Context = base64Context.substring(2);
            console.log('base64Context = '+base64Context);
        }
        var addressableContext = JSON.parse(window.atob(base64Context));
        let workspaceAPI = component.find( "workspace" );
        workspaceAPI.isConsoleNavigation().then(function(response) {
            if(response){
                component.set("v.parentRecordId", addressableContext.attributes.recordId);
                
            }else{
                var value = helper.getParameterByName(component , event, 'inContextOfRef');
                var context = JSON.parse(window.atob(value));
                component.set("v.parentRecordId", context.attributes.recordId);
            }
        })
        
    },

    
    handleCancel: function (component, event, helper) {

        var workspaceAPI = component.find("workspace");
        workspaceAPI.isConsoleNavigation().then(function(response) {
           
            if(response){
                workspaceAPI.getFocusedTabInfo().then(function(response) {
                    var focusedTabId = response.tabId;
                    console.log('focusedTabId   :',focusedTabId);
                    workspaceAPI.closeTab({tabId: focusedTabId});
                })

            }else{
                var url = window.location.href;
                var value = url.substr(0,url.lastIndexOf('/') + 1);
                window.history.back();
                return false;
            }
        })
        .catch(function(error) {
            console.log(error);
        });
    },
}

So when i'm in standard app i click on cancel i want to return to the previous page .

but when i click on cancel the form field values aren't reset , means when i open the form i Type XXX on the account Name i click cancel then i open the form again the account name isn't reset ..

Sometimes it works when i put in LWC JS handleCancel method

 handleCancel(event) {
        this.resetFields();
        this.dispatchEvent(new CustomEvent('cancelportefeuille'));
    }

resetFields() {
        getAccountRecord({ recordId: "$recordId" }).then(data => {
            this.WiredAccountRecord = data;
           // this.AccountRec.Name = this.WiredAccountRecord[0].Name;
            this.AccountRec.IsActive__c = true;
            this.accRecord = this.recordId;
            this.AccountRec.AccountManager__c = this.accRecord;
            this.AccountRec.AccountOwner__c = this.recordId;
            this.AccountRec.AccountCommission__c = this.recordId;
            this.AccountRec.ActivityType__c = LWC_Business_Portfolios_ActivityTypeField_NomPropre_Value;

        })
    }

whith this update sometimes the fields are reset sometimes not .. i'm confused ..

Answer 1

resetFields is asynchronous, so you're not actually waiting for the server call to complete. This can be a problem. Wait for the function to finish before you send the event.

async handleCancel(event) {
    await this.resetFields(); 
    this.dispatchEvent(new CustomEvent('cancelportefeuille'));
}

async resetFields() {
    const data = await getAccountRecord({ recordId: this.recordId });
    this.WiredAccountRecord = data;
   // this.AccountRec.Name = this.WiredAccountRecord[0].Name;
    this.AccountRec.IsActive__c = true;
    this.accRecord = this.recordId;
    this.AccountRec.AccountManager__c = this.accRecord;
    this.AccountRec.AccountOwner__c = this.recordId;
    this.AccountRec.AccountCommission__c = this.recordId;
    this.AccountRec.ActivityType__c = LWC_Business_Portfolios_ActivityTypeField_NomPropre_Value;
}

Where async essentially turns a function into a Promise, and await waits for a promise to resolve before continuing (effectively making the rest of the code inside the then of a Promise).