bug: Refresher throws an exception in React/Vue on load

[sean-perkins]

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

The Refresher component throws an exception in the console when it loads, preventing the component from being usable.

Expected Behavior

The refresher should not throw any exceptions on load and should be interactive.

Steps to Reproduce

1. Include ion-refresher in React/Vue template
2. Observe: Exception is thrown when component loads

Code Reproduction URL

https://github.com/jameson-w-taylor/vue-refresher-error

Ionic Info

N/A

Additional Information

No response

[sean-perkins]

Dev-build to resolve this issue: 6.2.4-dev.11660836281.1a11712b.

You can also downgrade to 6.2.2 in the interim. This bug only effects 6.2.3.

[Janaka-Steph]

Dev-build to resolve this issue: 6.2.4-dev.11660836281.1a11712b.

You can also downgrade to 6.2.2 in the interim. This bug only effects 6.2.3.

@sean-perkins Not related to this issue but trying 6.2.2 and 6.2.4-nightly.20220822 I have a new issue where useIonViewWillEnter is not executed...

[sean-perkins]

@Janaka-Steph can you open a new issue with a reproduction so we can take a look?

[milanharia]

@sean-perkins seems like there is an issue with the refreshers on pages with IonContent fullscreen which have a color.

Simulator.Screen.Recording.-.iPhone.12.Pro.Max.-.2022-08-22.at.17.30.04.mp4

Code to reproduce this issue:

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent color="warning" fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar color="warning">
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
          <IonRefresherContent></IonRefresherContent>
        </IonRefresher>
        <div className="center">
          <h1>Tab 1</h1>
        </div>
      </IonContent>
    </IonPage>
  );
};

[sean-perkins]

@milanharia can you open a new issue with your expected behavior and a reproduction repository? This issue is focused on the exception that is currently thrown in React/Vue applications. This issue will automatically close when the associated PR is merged.