Skip to content

Commit

Permalink
🐛 Allows model.fill to work with checkbox arrays (#3676)
Browse files Browse the repository at this point in the history
  • Loading branch information
ekwoka authored Jul 24, 2023
1 parent c3c8f26 commit fb8e33a
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 3 deletions.
6 changes: 4 additions & 2 deletions packages/alpinejs/src/directives/x-model.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
13 changes: 12 additions & 1 deletion tests/cypress/integration/directives/x-model.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`
<div x-data="{ a: ['456'] }">
<input type="checkbox" x-model.fill="a" value="123" checked />
<input type="checkbox" x-model.fill="a" value="456" />
</div>
`,
({ get }) => {
get('[x-data]').should(haveData('a', ['123']));
}
);

0 comments on commit fb8e33a

Please sign in to comment.