Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Scroll-events not working in version 8.4.3 of @ionic/vue #30175

Open
3 tasks done
cclilshy opened this issue Feb 4, 2025 · 5 comments · May be fixed by #30227
Open
3 tasks done

bug: Scroll-events not working in version 8.4.3 of @ionic/vue #30175

cclilshy opened this issue Feb 4, 2025 · 5 comments · May be fixed by #30227
Labels

Comments

@cclilshy
Copy link

cclilshy commented Feb 4, 2025

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Time of discovery

The anomaly was discovered after a 'yarn upgrade' on 02/04/2024
@ionic/[email protected]:"https://registry.npmmirror.com/@ionic/vue/-/vue-8.4.3.tgz#c59d81e0639f28827ea289d4f2a81c5255cb7f15"

Specific phenomena

example1

This code doesn't do any work

<ion-content :scroll-events="true" @ionScroll="handleScroll">

example2

The 'disabled' and 'loading-text' of this code both work, but the '@ionInfinite' does not fire

<ion-infinite-scroll :disabled="!hasMore" @ionInfinite="handleInfinite">
  <ion-infinite-scroll-content :loading-spinner="'bubbles'" :loading-text="t('message.loading')">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

Expected Behavior

see:https://ionicframework.com/docs/api/content#scroll-events

Steps to Reproduce

see:https://ionicframework.com/docs/api/content#scroll-events

solution

  • Rolled back the dependencies to version 8.4.1 and everything worked fine
  • It works fine after removing import {IonContent...} from "@ionic/vue";, but the console prompts

Failed to resolve component: ion-content If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Possible problems

  • proxies.d.ts There is a problem

Code Reproduction URL

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.4.3

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : 6.2.0
@capacitor/core : 6.2.0
@capacitor/ios : 6.2.0

Utility:

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

System:

NodeJS : v20.11.0 (~/.nvm/versions/node/v20.11.0/bin/node)
npm : 10.9.2
OS : macOS Unknown

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Feb 4, 2025
@NyaomiDEV
Copy link

<ion-content :scroll-events="true" @[ion-scroll]="handleScroll">

or also

<ion-infinite-scroll :disabled="!hasMore" @[ion-infinite]="handleInfinite">

should work.

Related #30170

@cclilshy
Copy link
Author

cclilshy commented Feb 4, 2025

<ion-content :scroll-events="true" @[ion-scroll]="handleScroll">

or also

<ion-infinite-scroll :disabled="!hasMore" @[ion-infinite]="handleInfinite">

should work.

Related #30170

Thank you. It can be used. Is this a temporary plan or a future standard?

@NyaomiDEV
Copy link

Thank you. It can be used. Is this a temporary plan or a future standard?

The consensus is that this is a bug and what I provided you with is a workaround

@cclilshy
Copy link
Author

cclilshy commented Feb 4, 2025

Thank you. It can be used. Is this a temporary plan or a future standard?

The consensus is that this is a bug and what I provided you with is a workaround

Thank you again for your answer.

@brandyscarney
Copy link
Member

Thank you for the issue! We're currently investigating this, along with all other related Vue issues introduced in version 8.4.3.

@brandyscarney brandyscarney linked a pull request Mar 5, 2025 that will close this issue
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants