bug: ion-refresher fails to trigger event @ionRefresh

[NunoSav]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
Pull-to-refresh executes it's animation but method on @ionRefresher event is not called

Expected behavior:
Pull-to-refresh executes it's animation and method on @ionRefresher event is called

Steps to reproduce:

1. open app
2. pull down on Page 1

Related code:
https://github.com/NunoSav/ionic-vue-bugs

Ionic info:

Ionic:

   Ionic CLI       : 6.12.2 (/Users/nur/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.4

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res (update available: 0.15.3) : 0.15.1
   native-run (update available: 1.3.0)   : 1.2.1

System:

   NodeJS : v12.16.3 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Big Sur

[liamdebeasi]

Looks like a regression in Vue as I can only reproduce on Vue 3.0.6. Try downgrading to 3.0.5 for now, and I will look into opening an issue on the Vue GitHub.

[liamdebeasi]

Looks like this was an actual bug that was fixed: vuejs/core#2847. Ionic Framework needs to emit these events as kebab-case.

Two options for workarounds:

1. Stay on Vue 3.0.5 until this gets fixed.
2. Write the event as @ionrefresh since we emit the events as lowercase right now.

[NunoSav]

Great work finding that out! 👏
Thanks for the workarounds, i'll use @ionrefresh for now.

[liamdebeasi]

Can you give this dev build a try on Vue 3.0.6?

npm install @ionic/vue@5.6.0-dev.202102261555.13bcb15 @ionic/vue-router@5.6.0-dev.202102261555.13bcb15

You should be able to do either @ionRefresh or @ion-refresh.

[NunoSav]

Tried it with @ionRefresh and worked.

[liamdebeasi]

Thanks for the issue! This is fixed in Ionic Vue v5.5.5.

npm install @ionic/vue@5.5.5 @ionic/vue-router@5.5.5

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.