ionic-team / ionic-team/ionic-framework

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

Offen
#30,094 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
triage
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

### 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.