From 8d8700f44c3d1ea64ae24f2448efc05dae4dfe12 Mon Sep 17 00:00:00 2001 From: Eric Kwoka <43540491+ekwoka@users.noreply.github.com> Date: Fri, 26 Apr 2024 12:08:40 +0400 Subject: [PATCH 1/3] :construction: Updates Lockfile --- package-lock.json | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) 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": {} } From f0019133408571ac1dff26e872af2041987b2366 Mon Sep 17 00:00:00 2001 From: Eric Kwoka <43540491+ekwoka@users.noreply.github.com> Date: Fri, 26 Apr 2024 12:38:08 +0400 Subject: [PATCH 2/3] :bug: Fixes issue with $mask not updating Models --- packages/mask/src/index.js | 14 +++++++++++--- tests/cypress/integration/plugins/mask.spec.js | 16 +++++++++++++++- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/mask/src/index.js b/packages/mask/src/index.js index 2769fc3b5..b480d67c3 100644 --- a/packages/mask/src/index.js +++ b/packages/mask/src/index.js @@ -40,7 +40,15 @@ 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) => { + updater(value); + processInputValue(el, false, true); + el._x_model.set(el.value); + }; + } }) const controller = new AbortController() @@ -60,7 +68,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) { + function processInputValue (el, shouldRestoreCursor = true, forceFormat = false) { let input = el.value let template = templateFn(input) @@ -69,7 +77,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) { + if (lastInputValue.length - el.value.length === 1 && !forceFormat) { return lastInputValue = el.value } diff --git a/tests/cypress/integration/plugins/mask.spec.js b/tests/cypress/integration/plugins/mask.spec.js index 1046e3e0b..7ea9c0b2d 100644 --- a/tests/cypress/integration/plugins/mask.spec.js +++ b/tests/cypress/integration/plugins/mask.spec.js @@ -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,17 @@ 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')) + } +) From 0ddf556ceebbd4a80a649ed741ad8afc878ac431 Mon Sep 17 00:00:00 2001 From: Eric Kwoka <43540491+ekwoka@users.noreply.github.com> Date: Fri, 26 Apr 2024 12:58:12 +0400 Subject: [PATCH 3/3] :recycle: Removed use of processInputValue --- packages/mask/src/index.js | 10 ++++++---- tests/cypress/integration/plugins/mask.spec.js | 3 ++- 2 files changed, 8 insertions(+), 5 deletions(-) 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')) } )