IonApp does not clean up event listeners on unmount, causing duplicate ripple effects on remount.

[fatheaddrummer]

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

v8.x

Current Behavior

When the IonApp component is unmounted and remounted, event listeners from the ripple effect and possibly other internal listeners are not properly cleaned up. As a result, multiple instances of the ripple effect stack on top of each other, making the ripple animation increasingly opaque (white or black, depending on the light/dark mode) with every remount.

Expected Behavior

When IonApp is unmounted or destroyed, all internal event listeners (such as those for the ripple effect) should be properly removed. This would allow IonApp to be remounted cleanly without causing duplicate ripple effects or other unexpected behaviors.

Steps to Reproduce

1. Create a Vue 3 app using Ionic Framework.
2. Use IonApp in a parent component and trigger a remount on a user action, such as clicking a button.
3. Ensure that the parent component forces a new key on IonApp, causing it to remount.
4. After 10-12 remounts, the ripple effect becomes fully white or black, indicating that the effect is stacking due to leftover event listeners.

Reproduction is ready to use on stackblitz in the provided url

Code Reproduction URL

https://stackblitz.com/edit/ydaewgzs?file=src%2FApp.vue

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/christiangrosskopf/.nvm/versions/node/v20.15.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v20.15.1 (/Users/christiangrosskopf/.nvm/versions/node/v20.15.1/bin/node)
npm : 10.9.2
OS : macOS Unknown

Additional Information

Use Case: This issue occurs in environments where IonApp needs to be frequently remounted, such as in Storybook for isolated UI component development or other framework-driven environments.
Environment: Ionic Framework for Vue 3
Impact: Ripple effect becomes visually incorrect and breaks the expected UI behavior.