Does not work with Vuetify inputs, masking breaks

[douglasg14b]

Describe the bug

With vuetify inputs, following thedocs:

          <v-text-field
            :value="model.phone"
            @input.native="model.phone = $event.target.unmaskedValue"
            v-facade="`(###) ###-####`"
            label="Phone number"
            filled>
          </v-text-field>

With input: 1234567890 is displays 1234567890 with no masking. It only masks when another number is typed at the end. So input 12345678901 displays (123) 456-7890 , and then immediately unmasks when the input is no longer focused.

The result of this is that the input is no longer masked.

[douglasg14b]

Really, setting the value external to the input causes the masking to be completely borked. You can type in numbers, and they don't show up...etc

[RonaldJerez]

I don’t expect that to work. You are trying to use a directive whose role is to display formatted text to display non formatted text if I’m looking at your code correctly. “On input, set the value of the input to the unformatted value”.

What you are trying to do requires a bit more logic than you may be able to do with just a few props. You can see the code for the component, that is already implementing this feature.

On Thu, Nov 4, 2021 at 1:44 PM Douglas Gaskell @.***> wrote:

Really, setting the value external to the input causes the masking to be completely borked. You can type in numbers, and they don't show up...etc

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/RonaldJerez/vue-input-facade/issues/42#issuecomment-961275928, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAS735LD7A7ZOVLW3M72IM3UKLH7VANCNFSM5HJ34JCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[douglasg14b]

I don’t expect that to work. You are trying to use a directive whose role is to display formatted text to display non formatted text if I’m looking

When a user is typing into a masked input, is that not unformatted text they are typing? Or when the component loads with an unformatted phone number? Or when an input value is modified else wear? ...etc

It seems odd that "one way data binding" would be officially unsupported. 🤔

This issue isn't necessarily as you interpreted: On input, set the value of the input to the unformatted value... That ignores that we're dealing with events & props in the first place. An input event is emitted, we do a thing, and then set a value a prop is bound to. This would be the same as a user typing or pasting those same characters somewhere no?

It's instead When the value prop is set, format the input. This example just ties the two together in one spot, but the same behavior can be seen by just having two input components side-by side, one masked, the other not, and typing into the unmasked one. Or by having a process that changes a form field value that is tied to a masked input.

---

I have a component that wraps this and does essentially the same thing as yours:

  watch: {
    value (newVal) {
      if (this.unmaskedValue !== newVal) {
        this.maskedValue = newVal
      }
    }
  },

The same behavior can be observed with the above.

[douglasg14b]

I can help debug if you want. I have not yet since I suspected you might have some ideas where the problem would lie given you're familiar with the code.

The behavior that it exhibits is rather odd, as you type characters you typed vanished every other character and are replaced in the masked input as the formatting for that mask. The final character causes it to unmask, and one more character causes it to mask, deleting the char that was typed

[RonaldJerez]

I’m still confused as to what it is that your code is trying to accomplish.

Based on your code example and my understanding of the code this is what is happening:

Initially value is passed in, we’ll call this value A. The directive receives this value and formats it based on the mask given, let’s call this value B. The input event is emitted given you value A and value B (unmasked and masked respectively), while displaying the value B to the user. Your event handler now takes those values and sets the model back to value A. Thus setting the input value back to the unmasked view and replacing what the directive is displaying.

You cannot have the model of the input and the unmasked value be the same. If your goal is to get the unmasked value I would recommend reassigning it to a different variable and letting the directive handle the v-model BAU.

On Thu, Nov 4, 2021 at 4:08 PM Douglas Gaskell @.***> wrote:

I can help debug if you want. I have not yet since I suspected you might have some ideas where the problem would lie given you're familiar with the code.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/RonaldJerez/vue-input-facade/issues/42#issuecomment-961378321, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAS735MBBSASWBXIULVG4D3UKLY3NANCNFSM5HJ34JCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.