ionic-team / ionic-team/ionic-framework

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

Ouverte
#30,094 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
triage
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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.

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.