bug: Presenting a modal with a leave animation immediately after dismissing clears the presented modal's content

[thor9n]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Behaviour

• Calling modalController.dismiss(undefined, undefined, "my-modal-id") in an existing modal, and then immediately opening a new modal, causes the new modal's content to be deleted.
• Everything works as expected if leaveAnimation are disabled when creating the modal, but obviously this shouldn't be needed.

Links
Live example on Codesandbox
Github issue explaining the three dismiss() arguments

Background/Use-case
When my users creates a new playlist they are redirected to that list's page, and immediately a Sheet Modal with the option to add songs are shown.

Expected Behavior

The following steps should display the last modal's content, no matter what animation settings are applied to the first modal.

1. User opens Modal #1
2. User clicks button → Redirects to New Page
3. New Page opens Modal #2
4. Content does NOT disappear

Steps to Reproduce

Link to Codesandbox showing the bug:
https://codesandbox.io/s/ionic-modal-dismiss-bug-7wmotx

(don't ask me why the routes are placed above eachother when redirecting, but the example works anyways)

Code Reproduction URL

https://codesandbox.io/s/ionic-modal-dismiss-bug-7wmotx

Ionic Info

   Ionic CLI       : 6.20.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.3.8

Capacitor:

   Capacitor CLI      : 4.5.0
   @capacitor/android : 4.5.0
   @capacitor/core    : 4.5.0
   @capacitor/ios     : 4.5.0

Utility:

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

System:

   NodeJS : v16.15.1 (/usr/local/bin/node)
   npm    : 8.12.1
   OS     : macOS Monterey

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[sean-perkins]

@thor9n thanks for reporting this issue. I am able to reproduce.

I believe this problem stems from: #24508.

There is a comment in the previous changes:

If the modal is presented through a controller, we don't need to detach since the el was already removed during the dismiss call above. Skipping this step also prevents an issue where rapidly dismissing right after presenting could cause detachComponent to be called after the present finished, blanking out the newly opened modal.

While we do not need to detach the destroyed component, we do still need to invoke the life cycle events for controller-based overlays.

I'll capture this as a bug and prioritize in our backlog.

[sean-perkins]

@thor9n after researching further, I've been able to isolate this to how we remove teleported components in Vue.

Can you try with this dev-build and let me know if you run into any issues?

npm install @ionic/[email protected] @ionic/[email protected]

I tested against your reproduction and it appears to resolve the core issue.

[thor9n]

@sean-perkins thanks for looking into this quickly! I can confirm that the modal works as expected, even after not configuring leaveAnimation.

Well done 👍🏼

[ionitron-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.