From d02aeafb2f78e7c58f4e2acc74b69207c87e475e Mon Sep 17 00:00:00 2001
From: Josh Hanley <josh@hitsystems.com.au>
Date: Fri, 20 Dec 2024 14:23:37 +1100
Subject: [PATCH 1/2] Add fix

---
 packages/mask/src/index.js | 11 ++++++++++-
 1 file changed, 10 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()

From abf988c00bfd16afa3f662cbfb06eabbe133b330 Mon Sep 17 00:00:00 2001
From: Josh Hanley <josh@hitsystems.com.au>
Date: Fri, 20 Dec 2024 14:42:22 +1100
Subject: [PATCH 2/2] Add a test

---
 tests/cypress/integration/plugins/mask.spec.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

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 }) => {