Phone/Numeric mask adds extra digit after blur / Using prefix prevents user from selecting all & deleting
See original GitHub issueHi all,
I love Cleave, but I’ve always had this issue when trying to add masks to phone numbers. To recreate the issue, I’ve setup a Codepen here, I’m using Cleave with Vue:
https://codepen.io/MatrixClaw/pen/JjYXqKb
The first input uses the US region phone configuration:
{
phone: true,
phoneRegionCode: 'US'
}
The second uses a custom mask to add parentheses and dashes to the phone number:
{
numericOnly: true,
prefix: '(',
delimiters: [') ', '-'],
blocks: [4, 3, 4],
noImmediatePrefix: true
}
When I type in a phone number, Cleave correctly masks the input according to the rules, but then on blur, if you’ve over-typed, it adds an extra digit at the end.
Alternatively, if you try to select everything in the custom mask field and delete it, nothing happens (this seems to only happen if you use a prefix). You have to delete each character one by one. I’ve added a third example removing the prefix and adding it as a delimiter to demonstrate:
{
delimiters: ['(', ') ', '-'],
blocks: [0, 3, 3, 4],
numericOnly: true
}
Here’s a short video for clarity:
https://video.drift.com/v/abylKah1gX7/
Any ideas what’s going on here??
Issue Analytics
- State:
- Created 3 years ago
- Comments:5
Top GitHub Comments
@calebwaldner Glad I was able to help someone. Here is the version for Vue3 :
We were having the same issue. I added these to the directive and it seemed to fix things on my end. Thanks @KaliaJS