search

alpinejs / alpine

A rugged, minimal framework for composing JavaScript behavior in your markup.
https://alpinejs.dev
MIT License
27.92k stars 1.22k forks source link

:bug: Masks model updates #4175

Open ekwoka opened 4 months ago

ekwoka commented 4 months ago

Solves #3691

Problem

When a value modeled onto an input with x-mask is updated on the data side (not via the masked input itself), the mask is not processing and masking the value. Most commonly this will be common with $money where the programmatically updated value is likely to just be a raw number or number string.

Demo

Solution

This checks for and wraps the x-model forced update method to retrigger the masking on the value and push it back into the model.

Not exactly pretty. I can do a more significant refactoring of the directive to make this cleaner, but this basically shows what steps aren't being handled.

Tests

This includes a bespoke test, as well as passes a previous disabled test (which is now enabled) that seemed to run into this issue in a flaky manner

calebporzio commented 4 months ago

Hey @ekwoka - can you provide a clearer explanation of what this PR is doing? Thanks. (also, clever approach: decorating the forceModelUpdate method)

ekwoka commented 4 months ago

You got it! 👍

Tim-Wils commented 4 months ago

@ekwoka Hey Eric, does this fix also fixes the bug with the native user-valid/user-invalid ? As per this discussion: https://github.com/alpinejs/alpine/discussions/4046

ekwoka commented 4 months ago

It shouldn't impact that at all.

Tim-Wils commented 4 months ago

Alright, that's a still a problem then. Thanks for this PR though!

godismyjudge95 commented 2 months ago

Ran into this issue just now. Going to have to figure out an alternate solution until this PR is merged as I need the mask to apply both with manual and programmatic updates.

Harkirat444 commented 1 month ago

When will this PR be merged?