Issues with state updates after upgrading to Ionic React 7

I am currently researching and studying Ionic and since my background is React, I decided to opt for the Ionic React framework. I started by looking at a todo app which I found on Github (GitHub - kilrasemifir/ionic-react-todolist) and which works perfectly. However when I upgraded from Ionic 6 to Ionic 7, I am noticing some a very bizarre issue:

When you run the application, you have to click the button twice to change the state (if you run the demo, you will notice that the first time you press the button you get an error that the task value is empty, then the second time you press the button, the task is added).

The bizarre thing is that this happens when either running the mobile simulation on the browser, or when running the application through the emulator (I tested on Android emulator with capacitor). On the other hand, this does not happen with the regular browser (mobile simulation switched off from browser).

When I change the ionic version back to 6, the issue disappears, and the state is updated immediately when pressing the button on the browser mobile simulator and the Android emulator. What am I missing?

I’m a Vue guy, but is it possibly related to the breaking changes with IonInput listed here - ionic-framework/ at 535b8ed72486a1e94125c72b12d5b447b630f8c4 · ionic-team/ionic-framework · GitHub.

Additional details about the Input events can be found here - ion-input: Custom Input With Styling and CSS Properties

Thanks! That was it. Replacing onIonChange with on IonInput did the trick.

1 Like