@ionChange not fired in ionic v7

Ionic Framework
1

I’m using the searchbar example in the ionic docs to handle the changes in a search input (in Vue JS). It was working fine on v6 and whenever I typed something in the input, the handleChange function was triggered.
But when I try the exact code after upgrading to ionic v7, nothing happens when typing in the search input and the handleChange funstion is not triggered. I read in the v6-to-v7 upgrade guide that ionChange will be triggered only with user interactions, and I am typing in the input and it should fire the handleChange function in v7 too, right? Here is my code:

<template>
  <ion-searchbar :debounce="1000" @ionChange="handleChange($event)"></ion-searchbar>
</template>

<script>
  import { IonSearchbar } from '@ionic/vue';

  export default{
    methods: {
      handleChange(event) {
        console.log(event); // not fired
        const query = event.target.value.toLowerCase();
      },
    },
  };
</script>
2

It looks like you now need to use IonInput event for the list to update as you type. Appears the StackBlitz example needs to be updated. There does seem to be a bug with IonChange as hitting enter or losing focus does not trigger the event (at least in the StackBlitz example).

The ionChange event is fired for <ion-searchbar> elements when the user modifies the element’s value. Unlike the ionInput event, the ionChange event is not necessarily fired for each alteration to an element’s value.

The ionChange event is fired when the value has been committed by the user. This can happen when the element loses focus or when the “Enter” key is pressed. ionChange can also fire when clicking the clear or cancel buttons.

EDIT: MDN has some additional info of when change fires for an input - HTMLElement: change event - Web APIs | MDN

3

I’m having the same issues as @saeedesmaili – are there examples anywhere of (quote from the breaking changes doc) “migrating your event listeners to using ionInput instead?”

I’m relatively new to Ionic and it’s not clear to me exactly what that means. Any guidance anyone can provide would be greatly appreciated.

Thanks!

4

I guess it depends on your code. The basic/simple answer is you swap out the @ionChange event with @ionInput on ion-searchbar.

5

In Ionic 6 (and earlier), ionChange fired whenever the value property on a component changed. This was confusing to many developers because it meant ionChange fired even when the application programmatically set the value (rather than the user typing or clicking something).

The ionChange behavior also did not align with the behavior of the change browser event when using a regular <input type="text" /> without Ionic.

In Ionic 7, the ionChange event now does what the change browser event does. Both change and ionChange fire once the user does something to change the value of a component and the component loses focus. If you want to be informed of every keystroke the user makes, you should use ionInput instead which aligns with the input browser event.

1 Like
6

Thank you so much for the clarification! Very helpful.

7

Liam, if you open up the Vue StackBlitz example here, ionChange is not fired when I hit enter or click out of the search box (loses focus) after typing in some text in the search box. Is this a bug or intended? From the explanation of the changes, it seems like a bug.

8

Thanks – very helpful!

I’m noticing now that when using @ionInput the behavior is a bit wonky.

Specifically if I have these values in the list I’m searching against:
AB123
AB456
BC789

If I search “AB1” and stop, it’ll pull up the first value. If I then delete the 1 and type a 4, it’ll say no results. And perhaps more concerning, if I delete the whole string and enter “AB” again it’ll still say no results.

This is a big change from the previous behavior with @ionChange which worked as expected, i.e., if I’d delete the 1 and type a 4 it’d filter the list correctly, and certainly if I deleted everything and started over with AB it’d show both strings starting with AB but not the one starting with BC.

I’ll have to keep playing around with this but on initial testing it doesn’t seem to be working correctly.

9

Can you file an issue with a reproduction on Issues · ionic-team/ionic-framework · GitHub?

10

Yep! I’ll create a simple use-case outside the context of the app I’m working on and see if the behavior is the same, and submit if it is. Thanks!

1 Like
11

Seems to be an issue with how I was doing the filtering to begin with, so basically I uncovered an existing bug in my app by upgrading to Ionic 7. :smiley: Nothing to see here I don’t think but I’ll follow up if I uncover more. Thanks so much to everyone for the help!

1 Like