From b03a52d8a0c6a43e5ac2396ec39708d12b32ff19 Mon Sep 17 00:00:00 2001
From: Josh Hanley <josh@hitsystems.com.au>
Date: Tue, 24 Dec 2024 01:12:17 +1100
Subject: [PATCH] Fix x-mask triggering update requests on load (#4481)

* Add fix

* Add a test
---
 packages/mask/src/index.js                     | 11 ++++++++++-
 tests/cypress/integration/plugins/mask.spec.js | 15 +++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/mask/src/index.js b/packages/mask/src/index.js
index 2769fc3b5..9686a0d67 100644
--- a/packages/mask/src/index.js
+++ b/packages/mask/src/index.js
@@ -40,7 +40,16 @@ export default function (Alpine) {
             }
 
             // Override x-model's initial value...
-            if (el._x_model) el._x_model.set(el.value)
+            if (el._x_model) {
+                // If the x-model value is the same, don't override it as that will trigger updates...
+                if (el._x_model.get() === el.value) return
+
+                // If the x-model value is `null` and the input value is an empty 
+                // string, don't override it as that will trigger updates...
+                if (el._x_model.get() === null && el.value === '') return
+
+                el._x_model.set(el.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..20d26e5ea 100644
--- a/tests/cypress/integration/plugins/mask.spec.js
+++ b/tests/cypress/integration/plugins/mask.spec.js
@@ -89,6 +89,21 @@ test('x-mask with x-model with initial value',
     },
 )
 
+test('x-mask with x-model if initial value is null it should remain null',
+    [html`
+        <div x-data="{ value: null }">
+            <input x-mask="(999) 999-9999" x-model="value" id="1">
+            <input id="2" x-model="value">
+            <span id="3" x-text="value === null ? 'NULL' : value"></span>
+        </div>
+    `],
+    ({ get }) => {
+        get('#1').should(haveValue(''))
+        get('#2').should(haveValue(''))
+        get('#3').contains('NULL')
+    },
+)
+
 test('x-mask with a falsy input',
     [html`<input x-data x-mask="">`],
     ({ get }) => {