Email input type problem

[antonioribeiro]

If we do (I know I'll have to tweak to accept other chars!):

<div id="app">
  <input type="email" v-mask="['XXXXXXXXXXXXXXXXXXXXXXXXXXX']" />
</div>

We get a

vue-the-mask.js:1 Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('email') does not support selection.
    at HTMLInputElement.e.oninput (https://unpkg.com/vue-the-mask@0.11.1/dist/vue-the-mask.js:1:1590)
e.oninput @ vue-the-mask.js:1

https://jsfiddle.net/xe7nd0o2/2/

[n3ps]

Getting this problem too

[helderhernandez]

Is this problem still unsolved?

[brolnickij]

:(

[victor-duarte]

A workaround is to avoid affecting the inputs of type email

.../src/plugins/mask.ts

import { defineNuxtPlugin } from '#app';
import { mask } from 'vue-the-mask';

export default defineNuxtPlugin((app) => {
  app.vueApp.directive('mask', {
    created: (el, binding, vnode, prevVnode) => {
      // Avoid setting directives on `inputs` of type `email` to avoid error
      // thrown by `vue-the-mask`.
      if (vnode.props.type === 'email') return;

      return mask(el, binding, vnode, prevVnode);
    },
  });
});