Merge pull request #10848 from IgniteUI/nalipiev/combo-checkbox-13.0

fix(combo): disable UI click for checkbox in combo #10838
IgniteUI · Jan 19, 2022 · 9288075 · 9288075
2 parents 8492157 + 4abdba3
commit 9288075
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.html b/projects/igniteui-angular/src/lib/combo/combo-item.component.html
@@ -1,4 +1,5 @@
 <ng-container *ngIf="!isHeader && !singleMode">
-    <igx-checkbox [checked]="selected" [disableRipple]="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
+    <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->
+    <igx-checkbox [checked]="selected" [readonly]="true" [disableRipple]="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
 <span class="igx-drop-down__inner"><ng-content></ng-content></span>
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -65,6 +65,8 @@ const CSS_CLASS_INPUT_COSY = 'igx-input-group--cosy';
 const CSS_CLASS_INPUT_COMPACT = 'igx-input-group--compact';
 const CSS_CLASS_INPUT_COMFORTABLE = 'igx-input-group--comfortable';
 const CSS_CLASS_EMPTY = 'igx-combo__empty';
+const CSS_CLASS_ITEM_CHECKBOX = 'igx-combo__checkbox';
+const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked';
 const defaultDropdownItemHeight = 40;
 const defaultDropdownItemMaxHeight = 400;
 
@@ -1927,12 +1929,19 @@ describe('igxCombo', () => {
             combo = fixture.componentInstance.combo;
             input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
         });
-        const simulateComboItemCheckboxClick = (itemIndex: number, isHeader = false) => {
+        const simulateComboItemClick = (itemIndex: number, isHeader = false) => {
             const itemClass = isHeader ? CSS_CLASS_HEADERITEM : CSS_CLASS_DROPDOWNLISTITEM;
             const dropdownItem = fixture.debugElement.queryAll(By.css('.' + itemClass))[itemIndex];
             dropdownItem.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
             fixture.detectChanges();
         };
+        const simulateComboItemCheckboxClick = (itemIndex: number, isHeader = false) => {
+            const itemClass = isHeader ? CSS_CLASS_HEADERITEM : CSS_CLASS_DROPDOWNLISTITEM;
+            const dropdownItem = fixture.debugElement.queryAll(By.css('.' + itemClass))[itemIndex];
+            const itemCheckbox = dropdownItem.query(By.css('.' + CSS_CLASS_ITEM_CHECKBOX));
+            itemCheckbox.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+        };
         it('should append/remove selected items to the input in their selection order', () => {
             let expectedOutput = 'Illinois';
             combo.select(['Illinois']);
@@ -2028,7 +2037,7 @@ describe('igxCombo', () => {
             fixture.detectChanges();
 
             const selectedItem_1 = dropdown.items[1];
-            simulateComboItemCheckboxClick(1);
+            simulateComboItemClick(1);
             expect(combo.selection[0]).toEqual(selectedItem_1.value.field);
             expect(selectedItem_1.selected).toBeTruthy();
             expect(selectedItem_1.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
@@ -2046,7 +2055,7 @@ describe('igxCombo', () => {
                 });
 
             const selectedItem_2 = dropdown.items[5];
-            simulateComboItemCheckboxClick(5);
+            simulateComboItemClick(5);
             expect(combo.selection[1]).toEqual(selectedItem_2.value.field);
             expect(selectedItem_2.selected).toBeTruthy();
             expect(selectedItem_2.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
@@ -2065,7 +2074,7 @@ describe('igxCombo', () => {
 
             // Unselecting an item
             const unselectedItem = dropdown.items[1];
-            simulateComboItemCheckboxClick(1);
+            simulateComboItemClick(1);
             expect(combo.selection.length).toEqual(1);
             expect(unselectedItem.selected).toBeFalsy();
             expect(unselectedItem.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
@@ -2087,10 +2096,26 @@ describe('igxCombo', () => {
             combo.toggle();
             fixture.detectChanges();
 
-            simulateComboItemCheckboxClick(0, true);
+            simulateComboItemClick(0, true);
             expect(combo.selection.length).toEqual(0);
             expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(0);
         });
+        it('should prevent selection when selectionChanging is cancelled', () => {
+            spyOn(combo.selectionChanging, 'emit').and.callFake((event: IComboSelectionChangingEventArgs) => event.cancel = true);
+            combo.toggle();
+            fixture.detectChanges();
+
+            const dropdownFirstItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[0].nativeElement;
+            const itemCheckbox = dropdownFirstItem.querySelectorAll(`.${CSS_CLASS_ITEM_CHECKBOX}`);
+
+            simulateComboItemCheckboxClick(0);
+            expect(combo.selection.length).toEqual(0);
+            expect(itemCheckbox[0].classList.contains(CSS_CLASS_ITME_CHECKBOX_CHECKED)).toBeFalsy();
+
+            simulateComboItemClick(0);
+            expect(combo.selection.length).toEqual(0);
+            expect(itemCheckbox[0].classList.contains(CSS_CLASS_ITME_CHECKBOX_CHECKED)).toBeFalsy();
+        });
     });
     describe('Grouping tests: ', () => {
         configureTestSuite();