Vue-form-generator: type: 'cleave' allows extraneous input

[voughtdq]

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]

Sorry. I need to check if this is fixed in the dev version. I will close for now.

[voughtdq]

On version 2.0.0-beta4

[voughtdq]

Here is a better visualization of what is happening:

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

[lionel-bijaoui]

Thanks a lot for your help !

[voughtdq]

I spent way too much time trying to debug this. I still found a solution, just not one that is as elegant as I'd like. I resolved this by adding onChanged to my schema:

... {
  type: 'cleave',
  label: 'Date of birth',
  model: 'dob',
  cleaveOptions: {
    date: true,
    datePattern: ['d', 'm', 'Y'],
    delimiter: '/'
  },
  onChanged (model, newVal, oldVal, field) {
    if (model[field.model].length >= 11) {
      model[field.model] = oldVal
  }
} ...

Very useful. I'm glad the functionality is there!

[icebob]

Thanks @voughtdq . Please don't close because it is a bug. We will try to fix it.

[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

[pjaer]

Anybody had any luck with this? I believe it is still around, as I'm experiencing it. Thanks

[lionel-bijaoui]

@voughtdq Can you please give us an update about this ? Did you managed to fix this ? If yes, how ? Thanks !

[voughtdq]

I never figured it out - sorry :(

On 08/24/2017 05:44 AM, lionel-bijaoui wrote:
>

@voughtdq https://github.com/voughtdq Can you please give us an
update about this ? Did you managed to fix this ? If yes, how ? Thanks !

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/icebob/vue-form-generator/issues/131#issuecomment-324587564,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB4Et5a8RaRanAr8tlC28LcaFNk6s_J5ks5sbUYEgaJpZM4MMaI-.

[pjaer]

I updated to the latest vue-cleave and it solved it for me, except on mobile chrome.. there it still doesn't work

[icebob]

Fixed by @hansi90