bug: v7 vue v-model not updating until input is blurred

[MimyyK]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

Hello,
I have a question about v7-beta with Vue, I did a test and it seems that the v-model doesn't work like before (v6.5.1).
With v6.5.1, when the user is writing in a ion-input it was updating my variable directly, with v7-beta, the user has to leave the field in order to update my variable.

If I replace v-model with :value="myFieldValueOnInput" @input="event => myFieldValueOnInput = event.target.value" it works.

Here is a video to see the current behavior:

ionic-v7-test.mov

It leads to undesired behavior from my point of view where a user have to leave the input focus to get the expected behavior from the form (when I want to know if my form is valid):

ionic-v7-test-project.mov

Expected Behavior

I'm not sure if this is a bug, maybe it's an expected change? But it seems to me that the v-model should update my variable.

Steps to Reproduce

• Open the Vue devtools
• Enter text in the field with v-model without leaving the field -> you can see in the devtools that the variable is not updated
• Click outside the field -> you can see in the devtools that the variable is now updated

Code Reproduction URL

https://github.com/MimyyK/test-ionic-v7

Ionic Info

Ionic:

Ionic CLI : 6.20.6
Ionic Framework : @ionic/vue 7.0.0-beta.0

Capacitor:

Capacitor CLI : 4.6.2
@capacitor/android : not installed
@capacitor/core : 4.6.2
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v18.12.1
npm : 9.2.0
OS : macOS

Additional Information

No response

[liamdebeasi]

Thanks for the report. I can reproduce this bug. The problem here is we need to listen for ionInput to update the v-model binding instead of ionChange. We updated ionChange to only fire when the value of the input is committed by the user (via a blur) in order to align with <input />. I will work on a fix for this.

[liamdebeasi]

Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/vue@7.0.0-dev.11677608949.16e25264 @ionic/vue-router@7.0.0-dev.11677608949.16e25264

[MimyyK]

Hello,
Thanks for the fix, it works well! 👍🏻

[liamdebeasi]

Thanks for the issue. This has been resolved via #26876, and a fix will be available in an upcoming release of Ionic Framework.

[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.