How can I manually trigger mask update in an input?

[matiasleidemer]

Is it possible to manually apply a mask to an input after programmatically setting a value?

If I manually set the value of a masked input via JS, it doesn't apply the mask:

// should show "5,000.00" in the browser but shows "5000.00"
elWithMask.value = "5000.00" 

The only way I was able to make it work was by manually dispatching an input event like this:

elWithMask.value = "5000.00" 
elWithMask.dispatchEvent(new Event('input', { 'bubbles': true }));

Are there other alternatives to applying the mask after manually setting the value?

Thanks!

[uNmAnNeR]

hi @matiasleidemer, if you have mask reference, to sync from input value you could use mask.updateValue()

[matiasleidemer]

@uNmAnNeR, I appreciate your prompt reply and assistance with this matter. Thank you! :)

I forgot to mention that I can't access the mask instance. The elWithMask is the DOM reference to the element with the mask, but the mask instance lives in another stimulus controller.

Based on your response, I understand that it's not possible to access the mask instance directly through the DOM element. In this case, I believe it's necessary to dispatch an event or find another alternative.

[uNmAnNeR]

yes, imask does not bind mask ref to the element. You could either bind it in stimulus controller or dispatch an event.
you are welcome.