text-mask / text-mask

Input mask for React, Angular, Ember, Vue, & plain JavaScript
https://text-mask.github.io/text-mask/
The Unlicense
8.26k stars 827 forks source link

[BUG] vue-text-mask 6 conflict with vuedraggable #788

Open s00d opened 6 years ago

s00d commented 6 years ago

After update to 6 version, browser freezes. This occurs with most components example:

<template>
  <div class="hello">
    <draggable v-model="items" :options="{ghostClass: 'ghost', handle: '.handle'}">
      <div v-for="(number, id) in items" :key="id" class="input-group height-size-edit" style="z-index: 100">
          <masked-input
            type="text"
            name="phone"
            class="form-control"
            :mask="['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]"
            :guide="false"
            v-model="items[id]"
            placeholderChar="_">
          </masked-input>

          <span class="input-group-addon handle height-size-edit no-radius" >|</span>
      </div>
  </draggable>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import MaskedInput from 'vue-text-mask'

  export default {
    name: 'HelloWorld',
    data () {
      return {
          items:["1","2","3","4"]
      }
    },
    props: {
      msg: String
    },
     components:{
        MaskedInput,
        draggable
      }
  }
</script>
s00d commented 6 years ago

exemple