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();