Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
3 tasks done
distante opened this issue May 2, 2025 · 4 comments
Labels
needs: investigation This issue is waiting on more investigation from the Ionic Team.

Comments

@distante
Copy link

distante commented May 2, 2025

Prerequisites

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.

@ionitron-bot ionitron-bot bot added the triage label May 2, 2025
@ShaneK ShaneK changed the title bug: [Angular] inline ion-modal is not dismissed when parent component is destroyed bug: [Angular] inline ion-modal cannot be dismissed when the parent component is destroyed May 5, 2025
@ShaneK ShaneK changed the title bug: [Angular] inline ion-modal cannot be dismissed when the parent component is destroyed bug: [Angular] inline ion-modal is not and cannot be dismissed when the parent component is destroyed May 5, 2025
@EinfachHans
Copy link
Contributor

EinfachHans commented May 7, 2025

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
Copy link
Author

distante commented May 7, 2025

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

@EinfachHans
Copy link
Contributor

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

@distante
Copy link
Author

distante commented May 7, 2025

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 ShaneK added the needs: investigation This issue is waiting on more investigation from the Ionic Team. label May 7, 2025
@ionitron-bot ionitron-bot bot removed the triage label May 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: investigation This issue is waiting on more investigation from the Ionic Team.
Projects
None yet
Development

No branches or pull requests

3 participants