diff --git a/packages/mask/src/index.js b/packages/mask/src/index.js index 0a99dd199..2769fc3b5 100644 --- a/packages/mask/src/index.js +++ b/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(() => { diff --git a/tests/cypress/integration/plugins/mask.spec.js b/tests/cypress/integration/plugins/mask.spec.js index eacf62772..c7c5ab869 100644 --- a/tests/cypress/integration/plugins/mask.spec.js +++ b/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` +
+ + +
+ `], + ({ 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`