Browser tab freeze if element with v-maska is hidden with v-if

[anatolykopyl]

Can be avoided by using v-show instead, but this is not a perfect solution.

For example I want to have a search input that is masked when I'm searching for hashtags and an unmasked input for everything else:

<template>
  <input
    v-if="category === 'hashtags'"
    v-model="query"
    v-maska="hashtagMask"
    type="text"
    placeholder="search"
  >
  <input
    v-else
    v-model="query"
    type="text"
    placeholder="search"
  >
</template>

<script>
export default {
  data() {
    return {
      category: 'all',
      query: '',
      hashtagMask: { mask: '!#H*', tokens: { H: { pattern: /[0-9a-zA-Zа-яА-Я_]/ } } }
    }
  }
}
</script>

This component will freeze the browser upon switching categories and entering text into the input without the v-maska directive.

[anatolykopyl]

Turns out the issue only appears if there are 2 different inputs with v-mask. Also Vue 3 is not affected, I was only able to reproduce on Vue 2.

Reproduction link codesandbox

[beholdr]

I have released new major version (v2.0). If this issue still valid, please reopen it.