Fix x-mask when used with wire:model (#3988)

packages/mask/src/index.js

@@ -49,7 +49,13 @@ export default function (Alpine) {
             controller.abort()
         })
 
-        el.addEventListener('input', () => processInputValue(el), { signal: controller.signal })
+        el.addEventListener('input', () => processInputValue(el), {
+            signal: controller.signal,
+            // Setting this as a capture phase listener to ensure it runs
+            // before wire:model or x-model added as a latent binding...
+            capture: true,
+        })
+
         // Don't "restoreCursorPosition" on "blur", because Safari
         // will re-focus the input and cause a focus trap.
         el.addEventListener('blur', () => processInputValue(el, false), { signal: controller.signal })
@@ -209,7 +215,7 @@ export function formatMoney(input, delimiter = '.', thousands, precision = 2) {
 
     template = `${minus}${addThousands(template, thousands)}`
 
-    if (precision > 0 && input.includes(delimiter)) 
+    if (precision > 0 && input.includes(delimiter))
         template += `${delimiter}` + '9'.repeat(precision)
 
     queueMicrotask(() => {

tests/cypress/integration/plugins/mask.spec.js

@@ -60,6 +60,21 @@ test('x-mask with x-model',
     },
 )
 
+test('x-mask with latently bound x-model',
+    [html`
+        <div x-data="{ value: '' }">
+            <input x-mask="(999) 999-9999" x-bind="{ 'x-model': 'value' }" id="1">
+            <input id="2" x-model="value">
+        </div>
+    `],
+    ({ get }) => {
+        get('#1').type('a').should(haveValue('('))
+        get('#2').should(haveValue('('))
+        get('#1').type('1').should(haveValue('(1'))
+        get('#2').should(haveValue('(1'))
+    },
+)
+
 test('x-mask with x-model with initial value',
     [html`
         <div x-data="{ value: '1234567890' }">