chore(combo): rename focus handler and add comment. Correct test behavior

Author: ViktorSlavov

projects/igniteui-angular/src/lib/combo/combo-item.component.html

@@ -1,4 +1,4 @@
 <ng-container *ngIf="!isHeader">
-    <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="handleFocus($event)" class="igx-combo__checkbox"></igx-checkbox>
+    <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
 <ng-content></ng-content>

projects/igniteui-angular/src/lib/combo/combo-item.component.ts

@@ -102,10 +102,14 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
     /**
      * @hidden
      * @internal
+     * The event that is prevented is the click on the checkbox label element.
+     * That is the only visible element that a user can interact with.
+     * The click propagates to the host and the preventDefault is to stop it from
+     * switching focus to the input it's base on.
+     * The toggle happens in an internal handler in the drop-down on the next task queue cycle.
      */
-    handleFocus(event: MouseEvent) {
+    disableCheck(event: MouseEvent) {
         event.preventDefault();
-        this.dropDown.element.focus();
     }
 
     ngDoCheck() {

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -28,6 +28,7 @@ const CSS_CLASS_DROPDOWNBUTTON = 'igx-combo__toggle-button';
 const CSS_CLASS_CLEARBUTTON = 'igx-combo__clear-button';
 const CSS_CLASS_CHECK_GENERAL = 'igx-combo__checkbox';
 const CSS_CLASS_CHECKBOX = 'igx-checkbox';
+const CSS_CLASS_CHECKBOX_LABEL = 'igx-checkbox__composite';
 const CSS_CLASS_CHECKED = 'igx-checkbox--checked';
 const CSS_CLASS_TOGGLE = 'igx-toggle';
 const CSS_CLASS_SELECTED = 'igx-drop-down__item--selected';
@@ -932,7 +933,7 @@ describe('igxCombo', () => {
         }
         function clickItemCheckbox(dropdownElement: any, itemIndex: number) {
             const dropdownItems = dropdownElement.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
-            const checkbox = dropdownItems[itemIndex].querySelector('.' + CSS_CLASS_CHECKBOX) as HTMLElement;
+            const checkbox = dropdownItems[itemIndex].querySelector('.' + CSS_CLASS_CHECKBOX_LABEL) as HTMLElement;
             checkbox.click();
         }
         function verifyItemIsSelected(