Alpine.js Mask Money masking with unexpected behavior

[michelbarutot]

Hello guys. I'm facing an issue with alpinejs money mask. This issue can be reproduceed on the official alpinejs plugin page, so a replication repository is not necessary, right? Instead, I'll drop the link for the specific session on the official docs, where the issue can be verified:

https://alpinejs.dev/plugins/mask#money-inputs

The issue is: every field with money mask input is including 3 precision digits on the mask, while the expected behaviour is 2 digits by default. Even with a explicit declaration for 2 precision digits on the $money contructor, results in a mask with 3 precision digits.

Screenshot from the official plugin:

3 precision digits, while the expected is 2 (by default):

3 precision digits, while the expected is 4 (explicit on the constructor):

Maybe I have misunderstooded something on the way, but I actually analyzed everything several times before coming here for help.

Thanks in advance!

[SimoTod]

That one is the thousands separator not the decimal one.

[docdunning]

"Precision" means the number of digits after the decimal point. As far as I can see, it's working as expected.

[SimoTod]

Yeah, that's not the decimal separator. That number is just 343434343 formatted with thousands separators (comma is used for that in English speaking countries). The precision is how many decimal you can have after the decimal separator (period, by default).

[michelbarutot]

@docdunning Thank you. Exactly, so I understand well what precision means. However, when doing the same test you did, with the number 12345678, this is my result:

As you can see, the formatted number is: 12,345,678 and not 1,234.5678.

@SimoTod thank you again. Look at the screenshot above. Isn't it strange the way this mask is behaving? I suspect there may be something with the region where I am, in this case, Brazil. I even looked for something in the apinejs documentation about Localization, but I didn't find anything about it.

Sorry to bother you guys with this so insistently.

[docdunning]

You need to explicitly enter a decimal point. If you just enter some digits, you'll get the thousands separator but nothing else.

[SimoTod]

It's behaving as expected as far as I can see

[michelbarutot]

@docdunning explained that it is necessary to enter the decimal point manually. It wasn't what I expected, but with this clarification I can move forward with an alternative. I really appreciate your time.

[michelbarutot]

You need to explicitly enter a decimal point. If you just enter some digits, you'll get the thousands separator but nothing else.

@docdunning Got it. There is no mention of this on documentation. If I need to place the decimal point manually, it doesn't make much sense to use a mask in this case. However, you made me understand what is happening, and that is enough to move forward with an alternative. Thank you for your patience and help.

[DanielGilB]

@michelbarutot could you final solution? Im dealing with same problem

[ekwoka]

You could use a custom mask that always has .00 at the end of it (or whatever actual numbers are typed there)

[michelbarutot]

@michelbarutot could you final solution? Im dealing with same problem

Hey! I ended up using a specific Filament plugin, leandrocfe/filament-ptbr-form-fields. It solved my issue, and there’s also some Alpine logic under the hood to make it work. Maybe you can extract some code from this package.

Hope it helps!

[DanielGilB]

Thanks guys, following @michelbarutot tip, this works for me:

<input
    x-on:keypress='function() {
        var charCode = event.keyCode || event.which;
        if (charCode < 48 || charCode > 57) {
            event.preventDefault();
            return false;
        }
        return true;
    }'
    x-on:keyup='function() {
        var money = $el.value.replace(/\D/g, "");
        money = (money / 100).toFixed(2) + "";
        money = money.replace(".", ",");
        money = money.replace(/(\d)(\d{3})(\d{3}),/g, "$1.$2.$3,");
        money = money.replace(/(\d)(\d{3}),/g, "$1.$2,");
        $el.value = money;
    }'
>

I hope it is helpful to someone.

Now, finally, I have to send the raw value to the backend. I'm not sure if it's possible to do it directly from the input using alpine. It occurs to me to bind a hidden input with the raw value.

[ekwoka]

When I need a display input that differs in some manner from the actual data I want to send, I do that. Just a bound hidden input.