bug: [Angular] inline ion-modal is not and cannot be dismissed when the parent component is destroyed

[distante]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When opening an ion-modal inline, if the parent component gets destroyed when the modal is open, the modal is not dismissed nor destroyed

Expected Behavior

The modal should close when the parent component is destroyed

Steps to Reproduce

1. Create an inline ion-modal inside a child-component
2. Destroy the Child component (ngIf or similar)

Code Reproduction URL

https://stackblitz.com/edit/tmgkbwps

Ionic Info

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/angular 8.5.6 @angular-devkit/build-angular : 19.2.6 @angular-devkit/schematics : 19.2.6 @angular/cli : 19.2.6 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 7.2.0 @capacitor/android : 7.2.0 @capacitor/core : 7.2.0 @capacitor/ios : not installed

Cordova:

Cordova CLI : not installed Cordova Platforms : not available Cordova Plugins : not available

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.18.3 (/Users/me/.volta/tools/image/node/20.18.3/bin/node) npm : 10.8.2 OS : macOS Unknown

Additional Information

I have not found any workaround for this besides use some flag inside the parent component to "render the content", which is dangerous since we can not prevent a regular Angular if usage in the future.

[EinfachHans]

This is because the modal is portaled to the body and not rendered with in the page component.

what i did in the past was save the modal instance and destroy it whenever the page is destroyed.

[distante]

That, IMO, beats the usage of the modal as inline.

[EinfachHans]

I agree. I guess what would be also needed for this would be #24198

[distante]

Maybe, I do not know how it is implemented internally. If it where an angular component wrapper that calls the modal controller internally, it could dismiss it .

[ShaneK]

Thanks for this issue report! I have a solution up I believe should fix this, if you wanna try it there's a dev build:

8.6.5-dev.11752242329.17d249a3

[distante]

Thanks for this issue report! I have a solution up I believe should fix this, if you wanna try it there's a dev build:

8.6.5-dev.11752242329.17d249a3

Hi, I will try it on Monday when I come back. The related PR mentions modal children, in my case it was a regular Angular component with an inline modal. Will it also work there?

[ShaneK]

@distante as far as I know it should, please let me know if you find otherwise

[ShaneK]

Oh, sorry, you mean it's just a component that's being removed and has a presenting modal? That won't be resolved by this, you'll just wanna add code that checks to see if your modal is presenting and dismiss it on will dismiss.

I have no idea how I could get a modal to identify when its parent component has been removed from the DOM without adding a bunch of expensive overhead checks.

[distante]

The ion-modal element Tag is removed from the DOM, but the content of the modal not. I would asume the ion-modal has some event when removed from the DOM?

Anyway, then this issue is not closed, probably?

[ShaneK]

The problem is the modal isn't in the same place in the DOM when the parent component is removed. You're right though, my other PR did not address this. I was working on another card I had associated with this one and thought they were the same thing and didn't review this properly before considering it closed.

I've created another PR that will address this issue, though I'm not super happy with how it has to work, it shouldn't be too bad. Basically, we'll create a mutation observer to watch our parent element and, if the parent is removed, we'll dismiss ourselves.

I've created a dev build for this here, if you'd like to try it:

8.6.5-dev.11752329407.10f7fc80

[ShaneK]

Thanks for reporting this issue! The fix for this has been deployed as part of v8.6.5

[distante]

Thanks! I got sick so I could not work but I will update next week.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.