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

ionic/vue ionChange not catchable in a straightforward way since update #30170

Open
NyaomiDEV opened this issue Jan 30, 2025 · 10 comments
Open
Labels

Comments

@NyaomiDEV
Copy link

NyaomiDEV commented Jan 30, 2025

In my code I have to do, for example:

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

<template>
	<IonPage>
		<IonHeader>
			<IonToolbar>
				<IonTitle>
					Test
				</IonTitle>
			</IonToolbar>
		</IonHeader>

		<IonContent>
			<IonList>
				<IonCheckbox @["ion-change"]="console.log"></IonCheckbox>
			</IonList>
		</IonContent>
	</IonPage>
</template>

with "ion-change" being specified literally that way, to listen to said event. Neither v-on:ionChange nor v-on:ion-change (with shorthands et cetera) are working anymore.

I noticed this after a dependency update that brought me to version 8.4.3 from version 8.4.1 - and also it went unnoticed because I personally only seldom use ionChange, relying most of the times on v-models.

(My project is https://github.com/NyaomiDEV/Ampersand if you want to know more)

Also, I was able to reproduce it minimally on StackBlitz: https://stackblitz.com/edit/vj18czas?file=src%2FApp.vue

@ionitron-bot ionitron-bot bot added the triage label Jan 30, 2025
@NyaomiDEV NyaomiDEV changed the title ionic/vue behaves strangely since a few versions ionic/vue ionChange not catchable in a straightforward way since update Jan 30, 2025
@mpaland
Copy link

mpaland commented Jan 30, 2025

I can confirm it.
I'm using Ionic Vue, 8.4.3 and it seems that after the update ALL @ionChange and @ionInput events are not working anymore, of all components (ion-range, ion-input etc).
The event handler gets not triggered.
I downgraded to 8.4.2 and it's working fine.

@anaseqal
Copy link

i can confirm it too.
in v 8.4.3 @ionRefresh and @ionInfinite is ignored, seems like global events handler issue.

@maximilianschmid
Copy link

Same @ion-change in vue not triggered anymore after update from @ionic/vue 8.4.2 to 8.4.3

@stefantschierschke
Copy link

stefantschierschke commented Jan 31, 2025

I can confirm this issue.

Using:
@ionic/vue: ^8.4.0
vue: ^3.5.13

None of the events from input fields are being triggered, including:
ion-select
ion-input
ion-textarea
ion-checkbox

Specifically, these event listeners are not firing:

@IonChange
@IonInput
@IonUpdate

A workaround is to rewrite the Ionic event bindings using Vue events, e.g., via v-model.
However, this should not be the final solution.

Has anyone found a proper fix for this?

@conradfr
Copy link

Oh, so I'm not crazy.

@dietmarscharf
Copy link

Downgrading to 8.4.2 seems the only solution for now!

@socialmedialabs
Copy link

Chiming in on this issue. I can confirm that ionChange does not fire since updating from [email protected] to [email protected].

Using ion-picker and adding an @ionChange to ion-picker-column does not fire any change events.

Downgrading to v8.4.2 solves the issue.

My setup
[email protected]
[email protected]
[email protected]

@NyaomiDEV
Copy link
Author

Downgrading to 8.4.2 seems the only solution for now!

Not really, you can always refactor your entire code to use the symbol instead (sarcasm) but that's what I did, and hopefully I can just leave it like that

@Ciriak
Copy link

Ciriak commented Feb 3, 2025

+1 @ionChange events are not fired anymore

@bekaku
Copy link

bekaku commented Feb 4, 2025

Seem like most of events not fired in version 8.4.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

10 participants