bug: ion-infinite-scroll ionInfinite event does not fire in ion-popovers

[HighQualityWaschbaer]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When using ion-infinite-scroll inside a ion-popover with an ion-list, the ionInfinite event does not fire once one has scrolled down to the bottom of the list.

Expected Behavior

The ionInfinite event should fire when scrolling down to the ion-infinite-scroll element in a ion-popover.

Steps to Reproduce

1. Create a ion-popover and properly configure it
2. Add a ion-list and fill it with content programmatically
3. Add an ion-infinite-scroll after the list as per example in the ionic docs
4. Add a function for the fired event that adds new content and completes the event
5. Optionally have a console.log in the function to check that the event has been fired
6. Run ionic serve and view the result

Code Reproduction URL

https://github.com/HighQualityWaschbaer/infinite-scroll-bug

Ionic Info

Ionic:

Ionic CLI : 6.20.8 (C:\Users\SRach\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 16.2.9
@angular-devkit/schematics : 16.2.9
@angular/cli : 16.2.9
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/android : not installed
@capacitor/core : 5.5.1
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.7.4

System:

NodeJS : v16.20.0 (C:\Program Files\nodejs\node.exe)
npm : 8.19.4
OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. The problem here is the .popover-viewport element has a height larger than the visible area of the popover. This means that when you scroll, you are scrolling that element and not the child ion-content. The infinite scroll component is listening for scroll events on ion-content which is why the infinite scroll event does not fire.

[liamdebeasi]

This should be preventing this but .popover-viewport sits outside of the popover's Shadow DOM, so it never matches:

ionic-framework/core/src/components/popover/popover.scss

Line 96 in cafafcc

.popover-viewport {

This likely broke when popover was updated to use the Shadow DOM. Fixing this should involve moving this style to a global stylesheet (i.e. ion-popover .popover-viewport).

[HighQualityWaschbaer]

Is there an estimate for a fix, yet? (I don't know how long it usually takes for a fix to get into production)

[liamdebeasi]

We don't provide time estimates for fixes. Someone from the team will post here when the issue has been resolved.

[HighQualityWaschbaer]

We don't provide time estimates for fixes. Someone from the team will post here when the issue has been resolved.

Alright

[liamdebeasi]

Here's a dev build with a proposed fix if you are interested in testing: 7.6.6-dev.11705696534.177666f8. Note that in your demo you'll want to make sure you initially load enough data such that your content can scroll.

[HighQualityWaschbaer]

Here's a dev build with a proposed fix if you are interested in testing: 7.6.6-dev.11705696534.177666f8. Note that in your demo you'll want to make sure you initially load enough data such that your content can scroll.

I tested the new version and it works flawlessly :)

[liamdebeasi]

Thanks for the issue. This has been resolved via #28861, and a fix will be available in an upcoming release of Ionic Framework. Feel free to keep testing the dev build, and let me know if you run into any issues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.