IonicRefresher event not working #30178
Description
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" }