Can not reset the `meta.dirty` flag using `resetField` method.

[makeupyourmind]

What happened?

I can not reset the meta.dirty flag using resetField method that provided by useField composition helper.

The documentation says: the following regarding resetField method:

Resets the field's validation state, by default it reverts all meta object to their default values and clears out the error messages. It also >updates the field value to its initial value without validating them.

So after resetting the field I expect that the meta.dirty flag will be equal to false but it isn't. It has a true value. Why? Maybe I'm doing something wrong? How can I reset the meta.dirty flag using useField composition helper?

My Vue template looks like:

<template>
  <div>
    <input type="text" v-model="textInput" />
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue';
import { string, boolean, object } from 'yup';
import { useField, useForm, useIsFormValid } from 'vee-validate';

export default {
  setup() {
    const validationSchema = computed(() => {
      return object({
        textInput: string(),
      });
    });

    const { meta, resetForm } = useForm({
      validationSchema,
    });

    const {
      value: textInput,
      resetField,
      meta: textInputMeta,
    } = useField('textInput', undefined, {
      initialValue: '',
    });

    onMounted(() => {
      console.log(
        'textInputMeta dirty before resetting field',
        textInputMeta.dirty
      ); // shows false
      // Docs says by default it reverts all meta object to their default values.
      // So I expect the `dirty` flag has a `false` value after that but it isn't.
     // For some reason, the flag is true.
      resetField({
        value: 'some text goes here',
      });
      console.log(
        'textInputMeta dirty after resetting field',
        textInputMeta.dirty
      ); // shows true
    });

    return {
      textInput,
    };
  },
};
</script>

My package.json looks like:

{
  "name": "vee-validate-playground",
  "private": false,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vee-validate": "^4.6.4",
    "vue": "^3.2.33",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "vite": "^2.8.0"
  }
}

I created a template in the sandbox for this. You can find it here.

Version

vue@3.2.33 and vee-validate@4.6.4

[logaretm]

Thanks for reporting this, this is a bug indeed with resetting values using resetField when the field is controlled by a form. It works with resetForm tho.

In any case, I have fixed the issue and will be tagging a patch shortly.

Thanks again for the detailed report and the sample.