diff --git a/projects/components/src/multi-select/multi-select.component.test.ts b/projects/components/src/multi-select/multi-select.component.test.ts index c516bff09..4c0b7ad41 100644 --- a/projects/components/src/multi-select/multi-select.component.test.ts +++ b/projects/components/src/multi-select/multi-select.component.test.ts @@ -138,6 +138,34 @@ describe('Multi Select Component', () => { }); })); + test('should block prevent default when checkbox is clicked', fakeAsync(() => { + const onChange = jest.fn(); + spectator = hostFactory( + ` + + + + `, + { + hostProps: { + options: selectionOptions, + selected: [], + onChange: onChange + } + } + ); + + spectator.tick(); + spectator.click('.trigger-content'); + const selectedCheckboxElement = spectator.queryAll('ht-checkbox', { root: true })[0]; + expect(spectator.dispatchFakeEvent(selectedCheckboxElement, 'click', true).defaultPrevented).toBe(true); + + expect(onChange).toHaveBeenCalledTimes(1); + expect(onChange).toHaveBeenCalledWith([selectionOptions[0].value]); + expect(spectator.query(LabelComponent)?.label).toEqual('first'); + flush(); + })); + test('should notify and update selection when selection is changed', fakeAsync(() => { const onChange = jest.fn(); diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts index 4a0cca551..a8903689d 100644 --- a/projects/components/src/multi-select/multi-select.component.ts +++ b/projects/components/src/multi-select/multi-select.component.ts @@ -92,7 +92,11 @@ import { MultiSelectJustify } from './multi-select-justify'; (click)="this.onSelectionChange(item)" class="multi-select-option" > - + implements AfterContentInit, OnChanges { return this.selected !== undefined && this.selected.filter(value => value === item.value).length > 0; } + public preventClickDefault(event: Event): void { + event.preventDefault(); + } + private setSelection(selected: V[]): void { this.selected = selected; this.setTriggerLabel();