LWC Run Event Child Then Reun Even on Parent

Question

In my parent LWC I have a modal which displays a child compoent. When the User clicks the Save & Close button I want to fire the Submit event on the Child which then fires a Success Event. Once this is complete I want to run an Event on the Parent to close the Modal and reset other components.
Below is the Code. It is doing what I want, but I receive an error due to the .then

[Cannot read properties of undefined (reading 'then')]

The other option I thought of was to call the Close Modal from the Child. However I could not determine how to send over the action details to the child i.e Save, Cancel, SaveClose.

Parent

   handleWerAction(event){
        if(event.target.value === 'Cancel'){
            this.template.querySelector('c-work-experience-record-page').handleCancel(event);
        }   
        if(event.target.value === 'Save'){
            this.template.querySelector('c-work-experience-record-page').handleSubmit(event);
        }
        if(event.target.value === 'SaveClose'){
            this.template.querySelector('c-work-experience-record-page').handleSubmit(event)
            .then(() => {
                this.handleWerCloseModal();
            })
        }
    }

Child

 showSpinner = false;
    @api handleSubmit(event){
        console.log('Submit = ' + event);
        this.showSpinner = true;
        this.template.querySelector('lightning-record-edit-form').submit()
            console.log('onsubmit event recordEditForm ' + event.detail.fields);
        window.setTimeout(() => { this.showSpinner = false;}, 10000);
    }

  handleSuccess(event) {
        const evt = new ShowToastEvent({
            title: 'Saved!',
            message: 'This Work Experience record has been updated',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
            console.log('onsuccess event recordEditForm', event.detail.id);
        this.resetFields();

    }
``

Answer 1

Your handleSubmit function doesn't actually return a Promise (there's no return value at all), so you end up with trying to access an undefined value with .then. There are two basic ways to solve this problem. Since you're already most of the way there with your current solution, I would say you could just modify the child's methods slightly:

onSuccessResolve;
@api handleSubmit(event){
    this.showSpinner = true;
    this.template.querySelector('lightning-record-edit-form').submit()
    window.setTimeout(() => { this.showSpinner = false;}, 10000);
    return new Promise((resolve) => this.onSuccessResolve = resolve);
}
handleSuccess(event) {
    const evt = new ShowToastEvent({
        title: 'Saved!',
        message: 'This Work Experience record has been updated',
        variant: 'success',
        mode: 'dismissable'
    });
    this.dispatchEvent(evt);
        console.log('onsuccess event recordEditForm', event.detail.id);
    this.resetFields();
    if(this.onSuccessResolve) {
        const resolve = this.onSuccessResolve;
        this.onSuccessResolve = null;
        resolve();
    }
}

We create a Promise, save its resolve parameter for calling then later, and return that Promise. On success, we check if we have a resolve method, and if we do, we remove it from the class property (a Promise can only resolve once), then call it. This will trigger .then and close your modal, and since the toast has already fired, it should remain until dismissed.