Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data-maska-eager weird behavior #128

Open
jiblett1000 opened this issue Jan 28, 2023 · 7 comments
Open

data-maska-eager weird behavior #128

jiblett1000 opened this issue Jan 28, 2023 · 7 comments

Comments

@jiblett1000
Copy link

Describe the bug

Hello,

I'm trying to implement this in a vue project. However, after trying to use the "eager" option, I've come across some strange behavior.

Entering the value creates the mask as expected with the eager behavior, but upon deleting the characters, at some point the value starts to become garbled and characters from the beginning of the mask option are being added into the input.

Steps to reproduce

Just use the eager option. In particular I'm creating a phone number input.

Reproduction link

https://stackblitz.com/edit/nuxt-starter-8swf8v?file=app.vue

@jiblett1000
Copy link
Author

P.S. You can reproduce the same behavior editing the 'phone' example in the documentation.

beholdr added a commit that referenced this issue Jan 29, 2023
@beholdr
Copy link
Owner

beholdr commented Jan 29, 2023

Thanks. Should be fixed in v2.1.6

@beholdr beholdr closed this as completed Jan 29, 2023
@jiblett1000
Copy link
Author

@beholdr Sure is. Thanks for the quick fix! :)

@gsouveton
Copy link

gsouveton commented Mar 10, 2023

Hello,
I'm still encoutering the same bug with 2.1.7.

Here's the code I'm using to reproduce (based of the demo code) :

<script>
import { vMaska } from "maska"

export default {
  directives: { maska: vMaska },
  data: () => ({
    maskedValue: "",
    bindedObject: {
      masked: "",
      unmasked: "",
      completed: false
    }
  })
}
</script>
<template>
  <input v-maska="bindedObject" data-maska-eager data-maska="##/##/20##" v-model="maskedValue">

  Masked value: {{ maskedValue }} or {{ bindedObject.masked }}
  Unmasked value: {{ bindedObject.unmasked }}
  <span v-if="bindedObject.completed">✅ Mask completed</span>
</template>

When characters are deleted from the input after the "fixed" ones are reached, they're not deleted but replaced (in this example) by a 2.
Is the bug still around or am I doing something wrong maybe?

bug

@jiblett1000
Copy link
Author

@gsouveton Just to be sure. Have you tried deleting your lock file and node modules and reinstalling?

@jiblett1000
Copy link
Author

@gsouveton @beholdr Nevermind. I tried this on my end and it is still happening with the example you provided. I tried swapping the slashes with dashes to see if that helped and the same thing. This issue needs to be reopened.

@beholdr
Copy link
Owner

beholdr commented Mar 13, 2023

Well, yes. Confirming this behaviour with eager mask, but I'm not sure I could easy fix that. For this I should change logic of the eager-mask processing.

I will reopen the issue, but currently advice not to use eager mode with such masks now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants