diff --git a/package-lock.json b/package-lock.json index 36bac5278..4113e8c15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7866,7 +7866,7 @@ } }, "packages/alpinejs": { - "version": "3.13.8", + "version": "3.13.10", "license": "MIT", "dependencies": { "@vue/reactivity": "~3.1.1" @@ -7874,17 +7874,17 @@ }, "packages/anchor": { "name": "@alpinejs/anchor", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT" }, "packages/collapse": { "name": "@alpinejs/collapse", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT" }, "packages/csp": { "name": "@alpinejs/csp", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT", "dependencies": { "@vue/reactivity": "~3.1.1" @@ -7892,12 +7892,12 @@ }, "packages/docs": { "name": "@alpinejs/docs", - "version": "3.13.8-revision.1", + "version": "3.13.10-revision.2", "license": "MIT" }, "packages/focus": { "name": "@alpinejs/focus", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT", "dependencies": { "focus-trap": "^6.9.4", @@ -7914,17 +7914,17 @@ }, "packages/intersect": { "name": "@alpinejs/intersect", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT" }, "packages/mask": { "name": "@alpinejs/mask", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT" }, "packages/morph": { "name": "@alpinejs/morph", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT" }, "packages/navigate": { @@ -7937,17 +7937,17 @@ }, "packages/persist": { "name": "@alpinejs/persist", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT" }, "packages/sort": { "name": "@alpinejs/sort", - "version": "3.13.8", + "version": "3.13.10", "license": "MIT" }, "packages/ui": { "name": "@alpinejs/ui", - "version": "3.13.8-beta.0", + "version": "3.13.10-beta.0", "license": "MIT", "devDependencies": {} } diff --git a/packages/mask/src/index.js b/packages/mask/src/index.js index 2769fc3b5..965ecec8c 100644 --- a/packages/mask/src/index.js +++ b/packages/mask/src/index.js @@ -40,7 +40,17 @@ export default function (Alpine) { } // Override x-model's initial value... - if (el._x_model) el._x_model.set(el.value) + if (el._x_model) { + 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); + el._x_model.set(value); + }; + } }) const controller = new AbortController() diff --git a/tests/cypress/integration/plugins/mask.spec.js b/tests/cypress/integration/plugins/mask.spec.js index 1046e3e0b..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``], @@ -61,7 +61,7 @@ test('x-mask with x-model', ) // This passes locally but fails in CI... -test.skip('x-mask with latently bound x-model', +test('x-mask with latently bound x-model', [html`
@@ -239,3 +239,18 @@ test('$money with custom decimal precision', get('#3').type('1234.5678').should(haveValue('1,234.567')) } ) + +test('$mask should process the value when updated by x-model', + [html` +
+ + +
+ `], + ({ get }) => { + get('input').should(haveValue('55,555')) + get('button').click() + get('input').should(haveValue('23,420')) + get('div').should(haveData('value', '23,420')) + } +)