ionic-team / ionic-team/ionic-framework
IonApp does not clean up event listeners on unmount, causing duplicate ripple effects on remount.
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 14 小时
- 30 天内合并 PR
- 50
描述
### 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.
贡献指南
调研方向
首先运行 src/App.vue 中链接的 StackBlitz 复现,并反复重新挂载 IonApp,以确认 ripple 叠加效果。然后跟踪 IonApp 针对 ripple 和其他内部事件监听器的挂载与卸载生命周期。当重新挂载不再产生重复的 ripple 效果,并且现有的 Vue 3 复现表现正常时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100