x-mask ($money) not working when deleting digits with <backspace> or <delete>

[jensolafkoch]

When I enter something into a field

<input
    type="text"
    name="sparplanBetrag"
    id="sparplanBetrag"
    x-model="sparplanBetrag"
    x-mask:dynamic="$money($input, ',')"
>

which is also referenced somewhere with

<span x-text="sparplanBetrag"></span>

x-mask does work perfectly when just adding digits.

It does not work when deleting digits with or keys though.

Interestingly, when leaving the field x-mask is applied again within the field, but not in the -Tag.

I guess x-mask should work whenever something is changed in the input field and it should always be reflected in all references?

[calfersantos]

estou com o mesmo problema!

[nickturrietta]

This bit me today.

For some reason, the lines listed below in the current version of mask/src/index.js explicitly drop the backspace key.

Ex: if the input value is 5,678 and the user presses backspace, then the input will be 5,67, instead of 567.

// Filename: mask/src/index.js

// If they hit backspace, don't process input.
if (lastInputValue.length - el.value.length === 1) {
     return lastInputValue = el.value
}

[ekwoka]

That does seem strange

[ksweetie]

It's hacky, but to work around this issue, I just blur/focus the input on keyup.

"x-on:keyup": "$refs.input.blur(); $refs.input.focus()"

[kg-currenxie]

Came across this today too. Fixes would be appreciated 🙏

[wevertondcl]

The bug continues :(, lost 3 hours trying to make my custom mask work and found out that its a bug with x-mask...
Using the @ksweetie workaround

[ekwoka]

So this isn't actually a bug, but part of the design.

If a mask like 99/99/99 exists, it auto adds the / once you type two numbers, but the user may want to delete the slash and edit the first numbers again.

That's a usability requirement.

So the value isn't masked when it is getting smaller, to allow backspaces to remove mask added characters.

[nickturrietta]

Hmm, if that is the case, then it differs from other popular input mask packages. (ex. [1])

It seems to me that if the specified input mask automatically adds a character, then hitting backspace should automatically remove that character.

Otherwise you get weirdness like this (source [2]):

If there is interest in comparing Alpine's implementation to other popular packages, I'm happy to do additional research and report back.

[1] https://www.npmjs.com/package/inputmask
177K weekly downloads | demo: https://robinherbots.github.io/Inputmask/#/demo
[2] https://alpinejs.dev/plugins/mask

[ekwoka]

The issue to then cover if if you type 12 and it masks to 12/ then when you hit backspace, we want to remove the / no? and not re-inject it. Or should we intercept the whole logic and delete both the / and the 2?

The money one is simple, others are trickier.

[nickturrietta]

The latter makes the most sense to me fwiw. This package adheres to the latter [1].

Their UI is a little different though. In many of their examples on their demo, the mask placeholder is shown on input focus, and remains visible while the user types, offering a stronger affordance at the expense of a simpler UI. I think I actually prefer Alpine's cleaner approach.

Let me do some more research and report back what other popular packages are doing for reference.

[1] https://robinherbots.github.io/Inputmask/#/demo

[wevertondcl]

Just solved the 'issue' creating my own Alpine Directive with the custom mask. Worked like a charm.

[nickturrietta]

@wevertondcl can you share it?

[ahmadrio]

thank you @kismonguz @SimoTod

[webmaxx]

There is one problem with this solution. If you need to erase a few numbers not at the end, then after each key press, the focus will move to the end

[ekwoka]

There is a refactor PR open that does solve this.

[markbaird]

@ekwoka can you link to that PR? I'm not seeing any open PRs that would seem to fix this.

[ekwoka]

@markbaird #4260

[daugaard]

An alternative workaround if you can't do the blur / focus workaround is to send an additional input event:

"x-on:keyup": "this.$refs.input.dispatchEvent(new Event('input'))"

This tricks the x-mask into updating since the second event will not trigger the backspace detection mechanism.

This allows you to also have callbacks on change that won't get constantly triggered.

[eitchtee]

Thank you for this. I've simplified it to x-on:keyup="$el.dispatchEvent(new Event('input'))", works beautifully.