diff --git a/packages/mask/src/index.js b/packages/mask/src/index.js index b480d67c3..965ecec8c 100644 --- a/packages/mask/src/index.js +++ b/packages/mask/src/index.js @@ -44,9 +44,11 @@ export default function (Alpine) { el._x_model.set(el.value) const updater = el._x_forceModelUpdate; el._x_forceModelUpdate = (value) => { + value = String(value); + value = formatInput(value, templateFn(value)); + lastInputValue = value; updater(value); - processInputValue(el, false, true); - el._x_model.set(el.value); + el._x_model.set(value); }; } }) @@ -68,7 +70,7 @@ export default function (Alpine) { // will re-focus the input and cause a focus trap. el.addEventListener('blur', () => processInputValue(el, false), { signal: controller.signal }) - function processInputValue (el, shouldRestoreCursor = true, forceFormat = false) { + function processInputValue (el, shouldRestoreCursor = true) { let input = el.value let template = templateFn(input) @@ -77,7 +79,7 @@ export default function (Alpine) { if(!template || template === 'false') return false // If they hit backspace, don't process input. - if (lastInputValue.length - el.value.length === 1 && !forceFormat) { + if (lastInputValue.length - el.value.length === 1) { return lastInputValue = el.value } diff --git a/tests/cypress/integration/plugins/mask.spec.js b/tests/cypress/integration/plugins/mask.spec.js index 7ea9c0b2d..cb4eb6d73 100644 --- a/tests/cypress/integration/plugins/mask.spec.js +++ b/tests/cypress/integration/plugins/mask.spec.js @@ -1,4 +1,4 @@ -import { haveValue, html, test } from '../../utils' +import { haveData, haveValue, html, test } from '../../utils' test('x-mask', [html``], @@ -251,5 +251,6 @@ test('$mask should process the value when updated by x-model', get('input').should(haveValue('55,555')) get('button').click() get('input').should(haveValue('23,420')) + get('div').should(haveData('value', '23,420')) } )