Mask plugin should update when setting values via x-model

[kg-currenxie]

<div x-data="{ amount: 1234 }">
  <input
    type="text"
    id="amount"
    name="amount"
    x-model="amount"
    x-mask:dynamic="$money($input)"
  />
  <button @click="amount = 9999">set amount to 9999</button>
</div>

this does not format the input correctly. feels like quite a common case

https://codesandbox.io/s/alpine-js-forked-plzxrm?file=/index.html

as a workaround, is there a way to re-trigger it?

found this; #3414 but it seems it only fixes initial values

[vjbento]

Same problem here.

[nikitaourazbaev]

Same here.

I’ve been setting the value of the input directly, followed by triggering a blur event on the input. x-mask listens for blur events so dispatching them manually re-triggers it. However, if the input value is updated quickly, sometimes the blur needs to be fired twice in order to re-trigger x-mask, which is not ideal. If the last input value set by x-mask included a single non-digit characters and the new value doesn’t, x-mask treats that as a backspace and doesn't run, so the blur needs to be dispatched twice in order to re-trigger x-mask, which is not ideal.

If x-mask responded to x-model changes that would be a better solution.

A workaround inside x-mask might be to add a third event listener, remask or process or something similar, in addition to input and blur, which would run processInputValue with a third parameter, that would ignore the backspace logic. This event could be triggered when the input’s value is changed from outside the input.

[PubliAlex]

+1 here, but confirmed, need an elegant solution

[danjdewhurst]

Ran into this one too. Also, not able to do a manual blur() strangely.

EDIT: Actually if I trigger a focus() and then a blur() it works.

[nikitaourazbaev]

Does it work if you dispatch blur twice?

[danjdewhurst]

Nope, I tried that too. I also tried a combination of nextTick and setTimeout without success.

[nikitaourazbaev]

Ah, interesting. Yep, it would be very nice if this were handled in the plugin directly.

[KangYoosam]

any update for this?

[ekwoka]

#4175

PR is open

@KangYoosam you can provide feedback and support there