Merge pull request #5367 from IgniteUI/vslavov/enable-combo-checkbox

fix(combo): enable combo checkboxes

Author: Lipata

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" disabled="true" 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

@@ -99,6 +99,19 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
         this.comboAPI.set_selected_item(this.itemID, event);
     }
 
+    /**
+     * @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.
+     */
+    disableCheck(event: MouseEvent) {
+        event.preventDefault();
+    }
+
     ngDoCheck() {
     }
 }

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

@@ -29,6 +29,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';
@@ -950,7 +951,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(

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss

@@ -16,12 +16,12 @@
 /// @prop {Map} hover-item-background [igx-color: 'surface', text-contrast: (), rgba: .04] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [igx-color: 'surface', text-contrast: (), rgba: .04] - The drop-down focused item background color.
 /// @prop {Map} focused-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down focused item text color.
-/// @prop {Map} selected-item-background [igx-color: ('secondary', 500)] - The drop-down selected item background color.
-/// @prop {Map} selected-item-text-color [igx-contrast-color: ('secondary', 500)] - The drop-down selected item text color.
-/// @prop {Map} selected-hover-item-background [igx-color: ('secondary', 300)] - The drop-down selected item hover background color.
-/// @prop {Map} selected-hover-item-text-color [igx-contrast-color: ('secondary', 300)] - The drop-down selected item hover text color.
-/// @prop {Map} selected-focus-item-background [igx-color: ('secondary', 300)] - The drop-down selected item focus background color.
-/// @prop {Map} selected-focus-item-text-color [igx-contrast-color: ('secondary', 300)] - The drop-down selected item focus text color.
+/// @prop {Map} selected-item-background [igx-color: ('secondary', 100)] - The drop-down selected item background color.
+/// @prop {Map} selected-item-text-color [igx-contrast-color: ('secondary', 100)] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-background [igx-color: ('secondary', 200)] - The drop-down selected item hover background color.
+/// @prop {Map} selected-hover-item-text-color [igx-contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-background [igx-color: ('secondary', 200)] - The drop-down selected item focus background color.
+/// @prop {Map} selected-focus-item-text-color [igx-contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
 /// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
 /// @prop {Map} disabled-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .38] - The drop-down disabled item text color.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the badge shadow.
@@ -70,27 +70,27 @@ $_light-drop-down: extend(
         ),
 
         selected-item-background: (
-            igx-color: ('secondary', 500)
+            igx-color: ('secondary', 100),
         ),
 
         selected-item-text-color: (
-            igx-contrast-color: ('secondary', 500)
+            igx-contrast-color: ('secondary', 100)
         ),
 
         selected-hover-item-background: (
-            igx-color: ('secondary', 300)
+            igx-color: ('secondary', 200),
         ),
 
         selected-hover-item-text-color: (
-            igx-contrast-color: ('secondary', 300)
+            igx-contrast-color: ('secondary', 200)
         ),
 
         selected-focus-item-background: (
-            igx-color: ('secondary', 300)
+            igx-color: ('secondary', 200),
         ),
 
         selected-focus-item-text-color: (
-            igx-contrast-color: ('secondary', 300)
+            igx-contrast-color: ('secondary', 200)
         ),
 
         disabled-item-background: transparent,