Ionic 4 nesting modals - how to trigger parent close by child close

Hi folks!

I’m have one modal (parent) that calls another modal on top of it (child), the behavior of the child in this scenario is:
user select an option and it returns to the parent, if the user close the child modal without choosing an option it should close the parent modal and redirect to other page.

Someone knows if is there a right way of doing that?

the way I’m trying on parent modal:

async displayChild() {
const modal = await this.modalController.create({
component: ChildModalComponent
});

await modal.present();

const {data} = await modal.onWillDismiss();

if (!data) {
await this.modalControler.dismiss();
}
}

With this .dismiss(); call nothing happens, but if I wrap it in a setTimeOut it closes the parent modal.

Check the value of “data”

Are you using the methods as shown in the help to set the value of “data” on dismiss?

Hi, thank’s for the help.

In the child moldal i made two methods one that always return some data (in the standards that you mentioned ) and other that just close the child. I’m insterested in solve the problem related with this second method, it will return nothing so data will be undefined and make that if condition true and call the dismiss() in the parent modal. I think that the modalControler isn’t changing the context to the parent modal to dismiss it. I noticed that there is an animation of 200ms in the modal, so wrapping the dismiss() in a setTimeout greater than 200ms works and dismiss the parent modal, but I don’t feel it’s the right way to do that and want to know if someone has a better alternative

Maybe you can post a simple example of what you’re doing on Github?

While you wait for somebody else to be more helpful, I’m going to chime in with the suggestion of rethinking the design. Modal windows are designed to focus the user’s attention on a single task, which absolutely must be completed right now before anything else can be done. Having nested layers of that is logically inconsistent, so if there are multiple tasks that have to be done right now, I would try to organize them in serial, like a “wizard”, instead of nesting them.

1 Like

I have the same problem, Did you find a solution?

Is there anything additional the post above yours could do to convince you to stop nesting modals?

Appreciate if you can share some example. I don’t understand ‘wizard’.Thanks in advance

It’s a UI term of art for a multi-stage modal.