🐛 Masks model updates

[ekwoka]

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]

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

[ekwoka]

You got it! 👍

[Tim-Wils]

@ekwoka Hey Eric, does this fix also fixes the bug with the native user-valid/user-invalid ? As per this discussion: #4046

[ekwoka]

It shouldn't impact that at all.

[Tim-Wils]

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

[godismyjudge95]

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]

When will this PR be merged?

[CleitonDeLima]

Suggested change

	<input type="text" x-model=value x-mask:dynamic="$money($input)">
	<input type="text" x-model="value" x-mask:dynamic="$money($input)">

[ariaieboy]

@calebporzio
Can you look at this PR and the issue it solves?

The problem is that when we change the Alpine data using JS the mask won't apply to the changed value.

The demo link that the author provided is obvious:

<div
  x-data="masked"
  class="w-full flex gap-2 justify-center flex-col items-center"
>
  <input
    type="text"
    x-model="value"
    x-mask:dynamic="$money($input)"
    class="p-2 text-center"
  />
  <button
    @click="value = 123000"
    type="button"
    class="py-2 px-4 bg-indigo-800 text-indigo-200 rounded-lg"
  >
    Update data value
  </button>
</div>

We have an input with an x-mask on it and a button that changes the input value when we click on it.
The problem is that when we click on the button, the value is set to 123000 and won't get masked.
The value should get masked and return 123,000