IonicRefresher event not working

[shinhagunn]

I initialized a new project using ionic CLI and then copied the IonRefesher example code and ran it but it seems the event is not triggered.
When I pull down, the loading spinner appears, but after 2 seconds it doesn't automatically hidden but keeps spinning.
The desired result should be: log 123 and hidden loading

Here is Page.vue

<ion-page>
  <ion-header>
    <ion-toolbar>
      <ion-title>Pull to Refresh</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>

    <p>Pull this content down to trigger the refresh.</p>
  </ion-content>
</ion-page>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';

const handleRefresh = (event: CustomEvent) => {
  console.log('123')
  setTimeout(() => {
    // Any calls to load data go here
    event.target.complete();
  }, 2000);
};
</script>

My package.json:

"dependencies": {
    "@capacitor/app": "7.0.0",
    "@capacitor/core": "7.0.1",
    "@capacitor/haptics": "7.0.0",
    "@capacitor/keyboard": "7.0.0",
    "@capacitor/status-bar": "7.0.0",
    "@ionic/vue": "^8.0.0",
    "@ionic/vue-router": "^8.0.0",
    "ionicons": "^7.0.0",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@capacitor/cli": "7.0.1",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "terser": "^5.4.0",
    "typescript": "~5.6.2",
    "vite": "~5.2.0",
    "vitest": "^0.34.6",
    "vue-tsc": "^2.1.10"
  }

[dimer47]

Hello,

I confirm the bug reported by [shinhagunn](https://github.com/shinhagunn). Since the new 8.4.3 release, the IonicRefresher no longer works on my Vue.js project. Reverting to version 8.4.2 fixes the issue without any problem.

I hope this helps in identifying the source of the problem,
I remain available if needed.

[shinhagunn]

Only revert "@ionic/vue" and "@ionic/vue-router" right ?

[dimer47]

Only revert @ionic/vue package.

[shinhagunn]

It's working, thanks sir

[dimer47]

The issue should not have been closed to allow the team to work on the fix. Could you please reopen the issue? Thank you.

[shinhagunn]

sorry about late

[chris-si]

I can also confirm the same behavior. v8.4.3unfortunately breaks the IonRefresher.

[tespheakdeyesoftix]

Hi,
I also have this issue in my project latest version, hope this problem resolve asap.

Thank

[martinclaus1]

I can also confirm that 8.4.3 breaks the IonRefresher.

[progcode]

same here too with 8.4.3

[yuricoco]

I've fixed @ionic/vue to 8.4.2 and it works now thx