Merge pull request #9224 from IgniteUI/rkaraivanov/fix-9223

fix(grid): invalid checkbox state in edit mode

Author: kdinev

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -90,8 +90,12 @@
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
+        <!-- The additional [checked] binding is needed as after the initial call of the checked getter
+        it is never called again as no change detection is triggered in the grid after that, resulting in wrong
+        rendered state of the checkbox. -->
         <igx-checkbox
             [(ngModel)]="editValue"
+            [checked]="editValue"
             [igxFocus]="true"
             [disableRipple]="true"
         ></igx-checkbox>

projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts

@@ -164,6 +164,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
             const editTemplate = cellDomBoolean.query(By.css('.igx-checkbox'));
             expect(editTemplate).toBeDefined();
             expect(cell.value).toBe(true);
+            expect(cell.nativeElement.querySelector('.igx-checkbox--checked')).toBeInstanceOf(HTMLElement);
 
             editTemplate.nativeElement.click();
             fixture.detectChanges();
@@ -173,6 +174,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
 
             expect(cell.editMode).toBe(false);
             expect(cell.value).toBe(false);
+            expect(cell.nativeElement.querySelector('.igx-checkbox--checked')).toBeNull();
         }));
 
         it('edit template should be according column data type -- date', () => {