0

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();

    }
``
1
  • 1
    You better to provide code of your "handleSubmit(event)" method from child LWC. Feb 1, 2023 at 0:01

1 Answer 1

0

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.

2
  • the problem is if I do that the modal closes immediately and I do not see the toast. Feb 1, 2023 at 0:24
  • @JeffCallahan Yep. It would have been useful to make fewer assumptions on my part, lol. I've completely rewritten this answer to reflect the path of least resistance to fixing your problem.
    – sfdcfox
    Feb 1, 2023 at 0:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .