diff --git a/packages/alpinejs/src/directives/x-model.js b/packages/alpinejs/src/directives/x-model.js index 0a8debcc3..0e4e1fccc 100644 --- a/packages/alpinejs/src/directives/x-model.js +++ b/packages/alpinejs/src/directives/x-model.js @@ -70,8 +70,10 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => { setValue(getInputValue(el, modifiers, e, getValue())) }) - if (modifiers.includes('fill') && [null, ''].includes(getValue())) { - el.dispatchEvent(new Event(event, {})); + if (modifiers.includes('fill')) + if ([null, ''].includes(getValue()) + || (el.type === 'checkbox' && Array.isArray(getValue()))) { + el.dispatchEvent(new Event(event, {})); } // 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 351d95a10..d2af463a0 100644 --- a/tests/cypress/integration/directives/x-model.spec.js +++ b/tests/cypress/integration/directives/x-model.spec.js @@ -186,5 +186,16 @@ test('x-model with fill modifier respects number modifier', } ); - +test( + 'x-model with fill applies on checkboxes bound to array', + html` +
+ + +
+ `, + ({ get }) => { + get('[x-data]').should(haveData('a', ['123'])); + } +);