x-model with fill modifier takes input value on null, empty string or…

… undefined (#3941)
alpinejs · Jan 21, 2024 · 35f9ac1 · 35f9ac1
1 parent 88be3ec
commit 35f9ac1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/alpinejs/src/directives/x-model.js b/packages/alpinejs/src/directives/x-model.js
@@ -71,7 +71,7 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     })
 
     if (modifiers.includes('fill'))
-        if ([null, ''].includes(getValue())
+        if ([undefined, null, ''].includes(getValue())
             || (el.type === 'checkbox' && Array.isArray(getValue()))) {
             el.dispatchEvent(new Event(event, {}));
     }

diff --git a/tests/cypress/integration/directives/x-model.spec.js b/tests/cypress/integration/directives/x-model.spec.js
@@ -210,9 +210,9 @@ test('x-model updates value when the form is reset',
     }
 )
 
-test('x-model with fill modifier takes input value on null or empty string',
+test('x-model with fill modifier takes input value on null, empty string or undefined',
     html`
-    <div x-data="{ a: 123, b: 0, c: '', d: null }">
+    <div x-data="{ a: 123, b: 0, c: '', d: null, e: {} }">
       <input x-model.fill="a" value="123456" />
       <span id="a" x-text="a"></span>
       <input x-model.fill="b" value="123456" />
@@ -221,13 +221,16 @@ test('x-model with fill modifier takes input value on null or empty string',
       <span id="c" x-text="c"></span>
       <input x-model.fill="d" value="123456" />
       <span id="d" x-text="d"></span>
+      <input x-model.fill="e.a" value="123456" />
+      <span id="e" x-text="e.a"></span>
     </div>
     `,
     ({ get }) => {
         get('#a').should(haveText('123'))
         get('#b').should(haveText('0'))
         get('#c').should(haveText('123456'))
         get('#d').should(haveText('123456'))
+        get('#e').should(haveText('123456'))
     }
 )