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 :)