type: 'cleave' allows extraneous input

Given the following component:

<template>
  <div>
    <vue-form-generator :schema="schema" :model="model" :options="options"></vue-form-generator>
    {{ model }}
  </div>
</template>

<script>
import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
Vue.use(VueFormGenerator)

export default {
  data () {
    model: {
      dob: ''
    },
    schema: {
      fields: [{
        type: 'cleave',
        label: 'Date of birth',
        model: 'dob',
        cleaveOptions: {
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: '/'
        }
      }]
    }
  }
}
</script>

The model will erroneously accept an additional character at the end of input. The model will be updated in Vue, but the change isn’t shown within the actual input element.

For example, the above component will allow me to enter: 030420011. The value in the model will be 03/04/20011, BUT the value in the actual field will be 03/04/2001.

If I backspace, the value in the model is reduced by 2 characters with the value in the actual field being reduced to 1.

[voughtdq]

There is a vue-cleave library that gives some insight - it looks like cleave.js relies on the max length property to guard against extraneous input. I will look into this around 04:30 UTC

[voughtdq]

I can also confirm that the cleave object itself has the correct data (see $vm0.cleave.getFormattedValue() and $vm0.cleave.getRawValue() both return the value without the extraneous character).

I’ll be back if I have any more info to report and hopefully a fix.