fix: clicking on checkbox does not select the option (#769)

* fix: clicking on checkbox does not select the option

* fix: linterning code

* fix: changing function name

* fix: adding UT

* fix: fixing UT

* fix: fixing ut

* fix: adding details

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

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(
+      `
+    <ht-multi-select (selectedChange)="onChange($event)" [selected]="selected">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
+      </ht-select-option>
+    </ht-multi-select>`,
+      {
+        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();
 

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"
               >
-                <ht-checkbox class="checkbox" [checked]="this.isSelectedItem(item)"></ht-checkbox>
+                <ht-checkbox
+                  class="checkbox"
+                  (click)="this.preventClickDefault($event)"
+                  [checked]="this.isSelectedItem(item)"
+                ></ht-checkbox>
                 <ht-icon
                   class="icon"
                   *ngIf="item.icon"
@@ -210,6 +214,10 @@ export class MultiSelectComponent<V> 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();