Modal controller dismiss issues when presenting a component that presents another (nested) component

Ionic Framework
1

I’m having issue where I present a component, A, which then presents a component B. Both components have the ModalController service injected. Component B gets dismissed via this.modalController.dismiss(). This works: component B disappears on that call to dismiss(). Then, component A gets dismissed via this.modalController.dismiss() BUT this second call to dismiss() does not work - i.e. component A remains not dismissed.

I can dismiss component A if I call dismiss() on it before presenting component B, then the dismiss of component B works and they are both dismissed in that case, but this is not what I want. I want A to present B, B to dismiss, then A to dismiss - this seems not possible right now, is that right?

Has anyone else seen such an issue? Does anyone have a solution? Any help would be much appreciated!

1 Like
2

When you talk from presenting Components, did you mean to show them as a Modal? So open a Modal A which opens a Modal B?

3

Yes, component A is presented via the ModalController from a page of the main app. Component A then uses its own injected ModalController to create and present component B.

[ Later, component B uses its own injected ModalController to call dismiss() which works and brings you back to seeing component A, but then, if component A calls dismiss() nothing happens, it does not go away. ]

[ The code is too big, messy at the moment to share a demonstration, but if this problem persists I may create a sample app to demonstrate this. ]

4

I don’t know if this solves your problem, but i explain you how i handle modals:
In the Component (the Modal) you can get the Modal Object self by just adding the modal Object to the Component like this:

export class ComponentA {

    modal: HTMLIonModalElement;

    constructor(){}

...
}

Then dismiss the Modal by this.modal.dismiss()

1 Like