Using v-mask directive on `b-form-input` not transferring to `input` element

Hello team,

I’m working with the v-mask (v1.3.0) plugin and attempting to use the v-mask directive on the b-form-input component like so:

<b-form @submit.stop.prevent="onSubmit">
    ... 
    <b-input-group left="Mobile*">
      <b-form-input
        type="text"
        v-model="mobile"
        v-mask="'###-###-####'"
        placeholder="___-___-____" />
    </b-input-group>
    ...
  </b-form>

The v-mask directive is turned into data-mask on the actual input element when everything gets compiled down and mounted to the DOM. I have been able to test this directive on a simple input element and it works and other custom input elements outside of bootstrap-vue work too (and they do not transform to data-mask property). I’m wondering if this could be a bug or if it’s expected behavior. Any ideas on what could be going wrong would be greatly appreciated.

[DavidVinicius]

I had the same problem using the Awesome Mask, but in my case, I imported wrongly the directives in the main.js file. When I used Vue.directive('mask', AwesomeMask);, then every worked.

[AlexcastroDev]

Did anyone find a solution to this?

Yes, its easy!

in your b-form-input, set @focus=“checkMask(id, mask)”

create this method and Voialá!

checkMask( mask, id ) {
                 let el = document.getElementById(id);
                el.setAttribute("v-mask", mask);
            },