maxlength attribute seems to interfer with vee-validate

[bpingris]

Versions

• vee-validate: ^3.1.3
• vue: ^2.6.10

Describe the bug
If an input has a maxlength attribute, there will be issues.
I found that issue when I was integrating vee-validate with my custom input, form and so on.

Let's take this component as our <MyInput /> component

<template>
  <validation-provider :name="name" :rules="rules" v-slot="{ errors }">
    <input v-model="cpy" :maxlength="maxlength">
    {{errors[0]}}
  </validation-provider>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ""
    },
    rules: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    maxlength: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      cpy: this.value
    };
  },
  watch: {
    cpy(v) {
      this.$emit("input", v);
    }
  },
};
</script>

and this one as <MyForm />

<template>
  <validation-observer v-slot="{ handleSubmit, reset }">
    <form @submit.prevent="handleSubmit(onSubmit)" @reset.prevent="reset">
      <slot/>
    </form>
  </validation-observer>
</template>

<script>
export default {
  props: {
    onSubmit: {
      type: Function,
      required: true
    }
  }
};
</script>

Now, a custom form component

<template>
  <my-form :on-submit="sub">
    <my-input  rules="required|min:5" v-model="vv"/>
    {{ vv }}
  </my-form>
</template>

<script>
import MyForm from "./Form";
import MyInput from "./Input";

export default {
  components: {
    MyForm,
    MyInput
  },
  data() {
    return {
      vv: ""
    };
  },
  methods: {
    sub() {
      console.log("Submitted !");
    }
  }
};
</script>

I'm supposed to have error message if my input is empty or has less than 5 characters.
However, validation will only works for the required option and when it's triggered the error will still remain.

To reproduce
Link to a codesandbox with the issue
https://codesandbox.io/s/winter-firefly-7ekz2

1. Select the input and write in it
2. Because of the min:5 rule, we should have an error but we don't
3. Empty the input
4. An error appears, it's the required rule
5. Write in the input
6. Still the error even if we write more than 5 characters

Desktop (please complete the following information):

• OS: manjaro
• Browser firefox, brave
• Version [e.g. 22]

TL.DR:

It seems that the maxlength attribute on inputs can break validation

[logaretm]

This indeed a bug, because vee-validate tries to infer a rule that isn't available.

[logaretm]

Fixed the issue, should be up in the next release.