diff --git a/packages/alpinejs/src/directives/x-model.js b/packages/alpinejs/src/directives/x-model.js index ed3c79f0d..80dbbb272 100644 --- a/packages/alpinejs/src/directives/x-model.js +++ b/packages/alpinejs/src/directives/x-model.js @@ -72,7 +72,9 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => { if (modifiers.includes('fill')) if ([undefined, null, ''].includes(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 // in addition to the cleanup function, x-modelable may call it. diff --git a/tests/cypress/integration/directives/x-model.spec.js b/tests/cypress/integration/directives/x-model.spec.js index db280bee9..c45422a3d 100644 --- a/tests/cypress/integration/directives/x-model.spec.js +++ b/tests/cypress/integration/directives/x-model.spec.js @@ -282,3 +282,15 @@ test( } ); +test( + 'x-model with fill and debounce still fills value', + html` +
+ +
+ `, + ({ get }) => { + get('[x-data]').should(haveData('a', 'hello')); + } +); +