bug: Integration with ion-input and Vee-Validate no longer working OnInput

[wsamoht]

Bug Report

Starting in Ionic v5.5.3, VeeValidate no longer works with Ionic when using validation OnInput. I was following this post originally setting up Ionic and VeeValidate but then came across this issue in the latest Ionic version.

Ionic version:

• 4.x
• 5.x

Current behavior:
Currently as you type in an ion-input component, the new value that VeeValidate receives is only set for a few milliseconds and then returns to the original or default value. The issue that this causes is if you want to show an error message in real-time (OnInput), the error doesn't appear or disappear until the user clicks out of the text box (OnChange) which can be misleading to them.

Here is an example of the issue as I type in the Name input. The name has validation of being required and a minimum of 3 characters. The value doesn't update until I click out of the text box. You can also play with the email input which is required and must be a valid email format.

ionic_vee_validate_with_issue.mp4

Expected behavior:
It is expected that VeeValidate receives the new value as you type and it would stay set.

ionic_vee_validate_without_issue.mp4

Steps to reproduce:
You can reproduce the issue on this test repo - https://github.com/wsamoht/ionic-and-vee-validate and the test code is in Home.vue.

1. Run npm install
2. Run ionic serve
3. Type in the Name input field

Related code:

<v-form :initial-values="initialValues" v-slot="{ errors, values }">
    <ion-item>
        <ion-label position="stacked">Name</ion-label>
        <v-field name="name" v-slot="{ field }" rules="required|min:3">
            <ion-input type="text" name="name" placeholder="Your name" v-bind="field" />
        </v-field>
    </ion-item>
</v-form>

Vee-Validate Resources:

• Documentation
• Explanation of how Vee-Validate uses an internal model removing the need for v-model
• How using v-model with v-bind conflict with each other

Ionic info:

Ionic:

   Ionic CLI       : 6.12.4 (/home/twestrick/.npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.4

Capacitor:

   Capacitor CLI   : 2.4.5
   @capacitor/core : 2.4.5

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run                             : 1.3.0

System:

   NodeJS : v14.15.4 (/usr/bin/node)
   npm    : 6.14.10
   OS     : Linux 5.4

[aaronksaunders]

try this.... it works fine for me. as="ion-input" instead of making the ion-input as the child component of the v-field component

<ion-item>
  <ion-label position="stacked">Name</ion-label>
  <v-field
    name="name"
    as="ion-input"
    rules="required|min:3"
    placeholder="Your name"
  />
</ion-item>
<ion-item>
  <ion-label position="stacked">Email</ion-label>
  <v-field
    name="email"
    rules="required|email"
    type="email"
    as="ion-input"
    placeholder="Your email"
  />
</ion-item>

[wsamoht]

For the most part that does work, sorry I didn't try that. The only issue that I have now is that Vee-Validate doesn't validate until the second character is typed but that is the same in 5.5.2. Maybe that is a Vee-Validate issue but not a big deal.

Should we consider that the fix?

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.6.0-dev.202102221703.5300dcc @ionic/vue-router@5.6.0-dev.202102221703.5300dcc

[wsamoht]

@liamdebeasi that fix is working for me. I switched back to using my original code with ion-input and not as="ion-input" to test. Everything works as expected. Thank you!!!!!

[Suxsem]

Dear @liamdebeasi, I was experiencing the same issue and tried your 5.6.0-dev.202102221703.5300dcc build and it indeed fixes the issue.
The problem is that I have now upgraded to 5.6.3 due to another issue in 5.6.0 and now the issue is back.
It seems to me that the fix has not been merged in the main branch, why?
Thank you!

[liamdebeasi]

Sorry, got tangled up in a few other things. I'll be opening a PR for this today.

[Suxsem]

@liamdebeasi great! Much appreciated!

[liamdebeasi]

Thanks for the issue. This has been resolved via #23114, 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.