bug: refresher, quickly scrolling after cancelling refresh causes duplicate refresh

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 an Ion Refresher on android, if you pull the refresher down partially (so it does not trigger the onIonRefresh event) and then scroll down quickly, the refresher animation triggers (but does not fire the refresh event) which causes the scroll to jank.

Expected Behavior

Scrolling down rapidly should not cause the refresher to appear.

Steps to Reproduce

Take any ionic app page which has enough content so the page can scroll and add an IonRefresher. Swipe down on the page slightly so the refresher icon begins to enter the page (but do not trigger it). Swipe up rapidly to scroll the page down quickly and the refresher icon will enter the page and cause the scrolling to jank.

Video Example

https://user-images.githubusercontent.com/76167627/172366889-3a36fa23-1e68-429f-aa8f-b771daccfc6f.mp4

An example of the code:

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
  console.log("Begin async operation");

  setTimeout(() => {
    console.log('Async operation has ended');
    event.detail.complete();
  }, 2000);
}

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
          <IonRefresherContent />
        </IonRefresher>
           {*/ ...Page Content */}
      </IonContent>
    </IonPage>
  );
};

Code Reproduction URL

https://github.com/milanharia/ionic-android-refresher

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.1.8

Capacitor:

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

Utility:

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

System:

NodeJS : v16.14.2 (/usr/local/bin/node) npm : 8.7.0 OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/25476, and a fix will be available in an upcoming release of Ionic Framework.

[milanharia]

I can confirm it is fixed in the dev build!