ionic-team / ionic-team/ionic-framework

bug: infinite-scroll, didFire can get stuck at true when items are removed dynamically

Đang mở
#28,272 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: core type: bug
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/.github/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 include this feature request, without success.

### Describe the Feature Request

Hi,

Infinite scroll component can "lock" if used on a scrollable element whose height changes by removing elements.

In the docs is not clear whether the component officially supports removing items/reducing height, as I always used it in the classic way of just showing more content by expanding it.

In my case, without a API hook to reset state, everytime I change the content size I simply remove it from the DOM with a *ngIf, and then i put it back.

Would be nice to have a reset() method or something like that.

### Describe the Use Case

After the first time you triggered the ionInfinite event, and correctly added stuff and call complete(), if for some reason you remove stuff and reduce height to 1 "page" you are stuck unable to call more content, as the infinitescroll component is in the "didFire ==true" state (you're still in the threshold zone), and wont fire the event again.
The component expects the scroll component to expand and only resets state when the scroll position exits the threshold zone.

### Describe Preferred Solution

The easiest way is to let the component fire the ionInfinite event in that edge case by resetting that particular state (didFire) via a public method, so it can be called every time we reduce height.

### Describe Alternatives

A workaround to this behaviour is removing the infinite scroll component from the DOM and reinsert it.

### Related Code

[stackblitz](https://stackblitz.com/edit/ionic7-angular15-qnkfgm?file=src%2Fapp%2Fapp.component.ts)

To reproduce pls trigger infinite scroll, then press "reduce elements" till it stops working.

### Additional Information

_No response_

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

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

Hướng nghiên cứu

Start with the StackBlitz reproduction in src/app/app.component.ts and follow the infinite-scroll component's didFire state around ionInfinite and complete(). Reproduce the reduce-elements sequence, then verify that reducing the content height no longer leaves infinite scroll unable to fire again.

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

Đánh giá

Công nghệ
angular, 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.