Vue.js inputmask hide placeholder after clicking outside input

Question

• Im working on a vue project and i have one component that is a numeric input like so :

<template>
   <input
      v-regex="regex"
      type="text"
   />
</template>

• the v-regex directive is created with inputmask like so :

Vue.directive('regex', {
         bind(element, binding) {
            inputMask({
               regex: binding.value,
               placeholder: '',
               showMaskOnHover: false,
               showMaskOnFocus: false,
               clearMaskOnLostFocus: false,
            }).mask(element)
         },
      })

-and the component is used inside a form like this :

<myComponent
 id="myId"
 class="my-class"
 :placeholder="'write Number'"
/>

the problem im having is : when i click inside the input and then outside it the placeholder "write Number" disappear and never show again unless i refresh the page , is there a way to fix this ? thank you

Answer 1

You are using the placeholder property of the inputMask component, see documentation here. This is different functionality, that placeholder is for digits for example. If you put that placeholder directly on the <input> tag it will work like you expect it to work.