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(); } ``
Improve this question
1
  • 1
    You better to provide code of your "handleSubmit(event)" method from child LWC. Commented Feb 1, 2023 at 0:01

1 Answer 1

Reset to default
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.

Improve this answer
2
  • the problem is if I do that the modal closes immediately and I do not see the toast. Commented 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. Commented Feb 1, 2023 at 0:50

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.