Merge pull request #14027 from IgniteUI/mdragnev/fix-14020-16.1.x

fix(grid): Blur the editing template before ending edit so that the e…

Author: kdinev

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -225,6 +225,13 @@ export class IgxCellCrudState {
         if (!this.cell) {
             return;
         }
+        // this is needed when we are not using ngModel to update the editValue
+        // so that the change event of the inlineEditorTemplate is hit before
+        // trying to update any cell
+        const cellNode = this.grid.gridAPI.get_cell_by_index(this.cell.id.rowIndex, this.cell.column.field).nativeElement;
+        const document = cellNode.getRootNode() as Document | ShadowRoot;
+        const activeElement = document.activeElement as HTMLElement;
+        activeElement.blur();
 
         const formControl = this.grid.validation.getFormControl(this.cell.id.rowID, this.cell.column.field);
         if (this.grid.validationTrigger === 'blur' && this.cell.pendingValue !== undefined) {
@@ -251,6 +258,8 @@ export class IgxCellCrudState {
 
         const args = this.cellEdit(event);
         if (args.cancel) {
+            // the focus is needed when we cancel the cellEdit so that the activeElement stays on the editor template
+            activeElement.focus();
             return args;
         }
 

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

@@ -9,11 +9,12 @@ import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import {
     CellEditingTestComponent, CellEditingScrollTestComponent,
     SelectionWithTransactionsComponent,
-    ColumnEditablePropertyTestComponent
+    ColumnEditablePropertyTestComponent,
+    CellEditingCustomEditorTestComponent
 } from '../../test-utils/grid-samples.spec';
 import { DebugElement } from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { first, takeUntil } from 'rxjs/operators';
+import { Subject, fromEvent } from 'rxjs';
 import { SortingDirection } from '../../data-operations/sorting-strategy';
 import { IGridEditDoneEventArgs, IGridEditEventArgs, IgxColumnComponent } from '../public_api';
 
@@ -328,6 +329,38 @@ describe('IgxGrid - Cell Editing #grid', () => {
             expect((document.activeElement as HTMLInputElement).selectionStart).toEqual(0)
             expect((document.activeElement as HTMLInputElement).selectionEnd).toEqual(10)
         }));
+
+        it('should work correct when not using ngModel but value and change event', fakeAsync(() => {
+            fixture = TestBed.createComponent(CellEditingCustomEditorTestComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+            gridContent = GridFunctions.getGridContent(fixture);
+            grid.getColumnByName("fullName").inlineEditorTemplate = fixture.componentInstance.templateCell;
+            fixture.detectChanges();
+
+            const cell = grid.gridAPI.get_cell_by_index(0, 'fullName');
+
+            UIInteractions.simulateDoubleClickAndSelectEvent(cell);
+            fixture.detectChanges();
+            tick(16); // trigger igxFocus
+
+            expect(cell.editMode).toBe(true);
+            const newValue = 'new value';
+
+            const editTemplate = fixture.debugElement.query(By.css('input'));
+            fromEvent(editTemplate.nativeElement, "blur").pipe(first()).subscribe(() => {
+                // needed because we cannot simulate entirely user input (change event needs it)
+                editTemplate.nativeElement.dispatchEvent(new Event('change'));
+                fixture.detectChanges();
+            });
+            UIInteractions.clickAndSendInputElementValue(editTemplate, newValue);
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('enter', gridContent);
+            fixture.detectChanges();
+            expect(cell.editMode).toBe(false);
+            expect(cell.value).toBe(newValue);
+        }));
     });
 
     describe('Scroll, pin and blur', () => {

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -37,11 +37,12 @@ import { IgxGridToolbarActionsComponent } from '../grids/toolbar/common';
 import { IgxGridToolbarHidingComponent } from '../grids/toolbar/grid-toolbar-hiding.component';
 import { IgxButtonDirective } from '../directives/button/button.directive';
 import { IgxGridEditingActionsComponent } from '../action-strip/grid-actions/grid-editing-actions.component';
-import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxFilterCellTemplateDirective } from '../grids/columns/templates.directive';
+import { IgxCellEditorTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxFilterCellTemplateDirective } from '../grids/columns/templates.directive';
 import { IgxGroupByRowSelectorDirective, IgxHeadSelectorDirective, IgxRowSelectorDirective } from '../grids/selection/row-selectors';
 import { CellType, ColumnType, IgxAdvancedFilteringDialogComponent } from '../grids/public_api';
 import { IgxGridComponent } from '../grids/grid/public_api';
 import { OverlaySettings } from '../services/public_api';
+import { IgxFocusDirective } from '../directives/focus/focus.directive';
 
 @Component({
     template: GridTemplateStrings.declareGrid('', '',
@@ -1732,6 +1733,38 @@ export class IgxGridGroupByComponent extends DataParent implements OnInit {
     }
 }
 
+@Component({
+    template: `
+        <igx-grid [data]="data">
+            <igx-column [editable]="true" field="fullName">
+            </igx-column>
+            <igx-column field="age" [editable]="true" [dataType]="'number'">   
+            </igx-column>
+            <igx-column field="isActive" [editable]="true" [dataType]="'boolean'"></igx-column>
+            <igx-column field="birthday" [editable]="true" [dataType]="'date'"></igx-column>
+            <igx-column [editable]="true" field="personNumber" [dataType]="'number'">
+            </igx-column>
+        </igx-grid>
+        <ng-template #cellEdit igxCellEditor let-cell="cell">
+            <input name="fullName" [value]="cell.editValue" (change)="onChange($event,cell)"  [igxFocus]="true"/>
+        </ng-template>
+    `,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCellEditorTemplateDirective, IgxFocusDirective]
+})
+export class CellEditingCustomEditorTestComponent extends BasicGridComponent {
+    @ViewChild('cellEdit', { read: TemplateRef }) public templateCell;
+    public override data = [
+        { personNumber: 0, fullName: 'John Brown', age: 20, isActive: true, birthday: new Date('08/08/2001') },
+        { personNumber: 1, fullName: 'Ben Affleck', age: 30, isActive: false, birthday: new Date('08/08/1991') },
+        { personNumber: 2, fullName: 'Tom Riddle', age: 50, isActive: true, birthday: new Date('08/08/1961') }
+    ];
+
+    public onChange(event: any, cell: CellType) {
+        cell.editValue = event.target.value;
+    }
+}
+
 @Component({
     template: `
         <igx-grid [data]="data">