ionic-team / ionic-team/ionic-framework

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

Đang mở
#30,094 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start by running the linked StackBlitz reproduction in src/App.vue and repeatedly remounting IonApp to confirm the stacked ripple effect. Then trace IonApp's mount and unmount lifecycle for ripple and other internal event listeners. Done means remounting no longer produces duplicate ripple effects and the existing Vue 3 reproduction behaves normally.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.