bug: refresher triggers when scrolling up on custom scroll host

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When using the <ion-refresher-content> component in combination with Angular’s <cdk-virtual-scroll-viewport> component, the refresher gets triggered when scrolling in the list. I also added the ion-content-scroll-host class to the <cdk-virtual-scroll-viewport> component to no avail.

https://user-images.githubusercontent.com/43609220/169274311-3a40c1d9-b7b6-4c61-a85f-db1ef107b888.mp4

Expected Behavior

When using the <ion-refresher-content> component in combination with Angular’s <cdk-virtual-scroll-viewport> component, the refresher should only be triggered when pulling at the start of the list.

Steps to Reproduce

1. Run the repro Ionic application
2. Put the screen in responsive mode like a phone screen
3. Scroll down
4. Scroll up without immediately releasing the mouse down / finger off the screen

Code Reproduction URL

https://github.com/TimGels/ionic-virtual-scroll-refresher-repro

Ionic Info

PS C:\Users\user\projects\ionic-virtual-scroll-refresher-repro> ionic info [WARN] Error loading @capacitor/ios package.json: Error: Cannot find module ‘@capacitor/ios/package’

   Require stack:
   - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module ‘@capacitor/android/package’

   Require stack:
   - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 6.18.2 (C:\Users\user\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/angular 6.1.6 @angular-devkit/build-angular : 13.2.6 @angular-devkit/schematics : 13.2.6 @angular/cli : 13.2.6 @ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

cordova-res : not installed globally native-run : 1.6.0

System:

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

Additional Information

I followed the docs on the implementation of the virtual scrolling.

A related issue that I came across #23437

[sean-perkins]

Can someone test with this dev build: 6.1.7-dev.11653327570.1759e1d5?

I’ve confirmed locally with the reproduction app, but would appreciate additional testing. Thanks!

[liamdebeasi]

Thanks for the issue. I can reproduce this. This line likely needs to be changed: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/refresher/refresher.tsx#L439.

This function calls this.el.closest('ion-content, .ion-content-scroll-host'). However, since ion-refresher is not used inside of the virtual scroll viewport, this guarantees that it will never find the .ion-content-scroll-host element. As a result, it falls back to using the scroll element inside of ion-content. Since this scroll element always has scrollTop = 0, the refresher activates when scrolling up on the virtual scroll container.