Browse Source

Bug: Fixes x-model.fill when used with debounce (#4103)

* :test_tube: Adds failing .fill.debounce test

* :bug: Fixes .fill.debounce conflict
Eric Kwoka 1 year ago
parent
commit
4590592470

+ 3 - 1
packages/alpinejs/src/directives/x-model.js

@@ -72,7 +72,9 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     if (modifiers.includes('fill'))
     if (modifiers.includes('fill'))
         if ([undefined, null, ''].includes(getValue())
         if ([undefined, null, ''].includes(getValue())
             || (el.type === 'checkbox' && Array.isArray(getValue()))) {
             || (el.type === 'checkbox' && Array.isArray(getValue()))) {
-            el.dispatchEvent(new Event(event, {}));
+        setValue(
+            getInputValue(el, modifiers, { target: el }, getValue())
+        );
     }
     }
     // Register the listener removal callback on the element, so that
     // Register the listener removal callback on the element, so that
     // in addition to the cleanup function, x-modelable may call it.
     // in addition to the cleanup function, x-modelable may call it.

+ 12 - 0
tests/cypress/integration/directives/x-model.spec.js

@@ -282,3 +282,15 @@ test(
     }
     }
 );
 );
 
 
+test(
+    'x-model with fill and debounce still fills value',
+    html`
+        <div x-data="{ a: '' }">
+            <input type="text" x-model.fill.debounce="a" value="hello" />
+        </div>
+    `,
+    ({ get }) => {
+        get('[x-data]').should(haveData('a', 'hello'));
+    }
+);
+