Merge branch '10.2.x' into ibarakov/fix-8184-10.2.x

DiyanDimitrov · web-flow · commit 533b4b32465b · 2020-10-29T15:09:52.000+02:00
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -795,6 +795,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         const dragMode = this.selectionService.pointerEnter(this.selectionNode, event);
         if (dragMode) {
             this.grid.cdr.detectChanges();
+            if (isIE()) { this.grid.tbody.nativeElement.focus({ preventScroll: true }); }
         }
     }
 
@@ -808,6 +809,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         this.grid.navigation.activeNode.gridID !== this.gridID))) { return; }
         if (this.selectionService.pointerUp(this.selectionNode, this.grid.onRangeSelection)) {
             this.grid.cdr.detectChanges();
+            if (isIE()) { this.grid.tbody.nativeElement.focus({ preventScroll: true }); }
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -175,11 +175,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _cdrRequests = false;
     protected _cdrRequestRepaint = false;
 
-    /**
-     * @hidden @internal
-     */
-    public snackbarDisplayTime = 2000;
-
     /**
      * @hidden @internal
      */
@@ -250,6 +245,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this._resourceStrings;
     }
 
+    /**
+     * Gets/Sets the display time for the row adding snackbar notification.
+     * @remarks
+     * By default it is 6000ms.
+     */
+    @Input()
+    public snackbarDisplayTime = 6000;
+
     /**
      * Gets/Sets whether to autogenerate the columns.
      * @remarks
@@ -2984,6 +2987,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     _setupListeners() {
         const destructor = takeUntil<any>(this.destroy$);
         fromEvent(this.nativeElement, 'focusout').pipe(filter(() => !!this.navigation.activeNode), destructor).subscribe((event) => {
+            if (this.selectionService.dragMode && isIE()) { return; }
             if (!this.crudService.cell &&
                 !!this.navigation.activeNode &&
                 ((event.target === this.tbody.nativeElement && this.navigation.activeNode.row >= 0 &&
@@ -5159,6 +5163,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected onColumnsChanged(change: QueryList<IgxColumnComponent>) {
         const diff = this.columnListDiffer.diff(change);
+
         if (this.autoGenerate && this.columnList.length === 0 && this._autoGeneratedCols.length > 0) {
             // In Ivy if there are nested conditional templates the content children are re-evaluated
             // hence autogenerated columns are cleared and need to be reset.
@@ -5168,15 +5173,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (diff) {
             let added = false;
             let removed = false;
-
-            this.initColumns(this.columnList);
-
-
             diff.forEachAddedItem((record: IterableChangeRecord<IgxColumnComponent>) => {
                 this.onColumnInit.emit(record.item);
                 added = true;
+                record.item.pinned ? this._pinnedColumns.push(record.item) : this._unpinnedColumns.push(record.item);
             });
 
+            this.initColumns(this.columnList);
+
             diff.forEachRemovedItem((record: IterableChangeRecord<IgxColumnComponent | IgxColumnGroupComponent>) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
@@ -5902,21 +5906,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
     }
 
-    /**
-     * @hidden @internal
-     */
-    copyHandlerIE() {
-        if (isIE()) {
-            this.copyHandler(null, true);
-        }
-    }
-
     /**
      * @hidden
      * @internal
      */
-    public copyHandler(event, ie11 = false) {
-        if (!this.clipboardOptions.enabled || this.crudService.cellInEditMode) {
+    public copyHandler(event) {
+        if (!this.clipboardOptions.enabled || this.crudService.cellInEditMode || (!isIE() && event.type === 'keydown')) {
             return;
         }
 
@@ -5935,7 +5930,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             result = result.substring(result.indexOf('\n') + 1);
         }
 
-        if (ie11) {
+        if (isIE()) {
             (window as any).clipboardData.setData('Text', result);
             return;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
@@ -88,6 +88,13 @@ export class IgxGridNavigationService {
                 event.preventDefault();
                 key === 'pagedown' ? this.grid.verticalScrollContainer.scrollNextPage() :
                     this.grid.verticalScrollContainer.scrollPrevPage();
+                const editCell = this.grid.crudService.cell;
+                this.grid.verticalScrollContainer.onChunkLoad
+                    .pipe(first()).subscribe(() => {
+                        if (editCell && this.grid.rowList.map(r => r.index).indexOf(editCell.rowIndex) < 0) {
+                            this.grid.tbody.nativeElement.focus({preventScroll: true});
+                        }
+                    });
                 break;
             case 'tab':
                 this.handleEditing(shift, event);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
@@ -5,7 +5,7 @@ import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './public_api';
 import { GridTemplateStrings, ColumnDefinitions } from '../../test-utils/template-strings.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicColumnsComponent } from '../../test-utils/grid-samples.spec';
+import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicColumnsComponent, GridAddColumnComponent } from '../../test-utils/grid-samples.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
@@ -27,7 +27,8 @@ describe('IgxGrid - Column properties #grid', () => {
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
                 ColumnHiddenFromMarkupComponent,
-                DynamicColumnsComponent
+                DynamicColumnsComponent,
+                GridAddColumnComponent
             ],
             imports: [IgxGridModule, NoopAnimationsModule]
         })
@@ -167,6 +168,34 @@ describe('IgxGrid - Column properties #grid', () => {
         expect(grid.columnList.last.field).toMatch('Name');
     }));
 
+    it('should add new column at the correct visible index', fakeAsync(() => {
+        const fix = TestBed.createComponent(GridAddColumnComponent);
+        fix.detectChanges();
+        const grid = fix.componentInstance.grid;
+        const maxVindex = fix.componentInstance.columns.length - 1;
+
+        // add to unpinned area
+        fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string' });
+        fix.detectChanges();
+
+        let cityCol = grid.getColumnByName('City');
+        expect(cityCol.visibleIndex).toEqual(maxVindex + 1);
+
+        // remove the newly added column
+        fix.componentInstance.columns.pop();
+        fix.detectChanges();
+
+        cityCol = grid.getColumnByName('City');
+        expect(cityCol).not.toBeDefined();
+
+         // add to pinned area
+        fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string', pinned: true });
+        fix.detectChanges();
+
+        cityCol = grid.getColumnByName('City');
+        expect(cityCol.visibleIndex).toEqual( 1);
+    }));
+
     it('should apply columnWidth on columns that don\'t have explicit width', () => {
         const fix = TestBed.createComponent(ColumnCellFormatterComponent);
         fix.componentInstance.grid.columnWidth = '200px';
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts
@@ -288,6 +288,27 @@ describe('IgxGrid - Row Adding #grid', () => {
             const cell = newRow.cells.find(c => c.column === column);
             expect(typeof(cell.value)).toBe(type);
         });
+
+        it('should allow setting a different display time for snackbar', async() => {
+            grid.snackbarDisplayTime = 50;
+            fixture.detectChanges();
+
+            const row = grid.getRowByIndex(0);
+            row.beginAddRow();
+            fixture.detectChanges();
+
+            endTransition();
+
+            grid.endEdit(true);
+            fixture.detectChanges();
+
+            expect(grid.addRowSnackbar.isVisible).toBe(true);
+            // should hide after 50ms
+            await wait(51);
+            fixture.detectChanges();
+
+            expect(grid.addRowSnackbar.isVisible).toBe(false);
+        });
     });
 
     describe('Add row events tests:', () => {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -98,7 +98,7 @@
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
 </div>
 
-<div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
+<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content" tabindex="0" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
         role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -82,7 +82,7 @@
     <div class="igx-grid__thead-thumb" [hidden]='!hasVerticalScroll()' [style.width.px]="scrollSize"></div>
 </div>
 
-<div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
+<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)" [attr.aria-activedescendant]="activeDescendant"
      (keydown)="navigation.handleNavigation($event)" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" role="rowgroup"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -64,7 +64,7 @@
         id="right" class="igx-grid__scroll-on-drag-right"></span>
 </div>
 
-<div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
+<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.handleNavigation($event)" role="rowgroup" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
         [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -122,6 +122,33 @@ export class ColumnHiddenFromMarkupComponent extends BasicGridComponent {
     data = SampleTestData.personIDNameData();
 }
 
+@Component({
+    template: `
+        <igx-grid #grid1 [data]="data" [columnPinning]='true' [width]="'900px'" [height]="'600px'">
+            <igx-column *ngFor="let c of columns" [field]="c.field"
+                [header]="c.field"
+                [movable]="c.movable"
+                [width]="c.width"
+                [editable]="true"
+                [pinned]="c.pinned"
+                [dataType]="c.type">
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class GridAddColumnComponent extends BasicGridComponent implements OnInit {
+    public columns: Array<any>;
+    data = SampleTestData.contactInfoDataFull();
+    public ngOnInit(): void {
+        this.columns = [
+            { field: 'ID', width: 150, movable: true, type: 'string', pinned: true },
+            { field: 'CompanyName', width: 150, movable: true, type: 'string'},
+            { field: 'ContactName', width: 150, movable: true, type: 'string' },
+            { field: 'ContactTitle', width: 150, movable: true, type: 'string' },
+            { field: 'Address', width: 150, movable: true, type: 'string' }];
+    }
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid('', '',
                 ColumnDefinitions.idNameFormatter)

Original file line number	Diff line number	Diff line change
`@@ -795,6 +795,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {`
`795`	`795`	`const dragMode = this.selectionService.pointerEnter(this.selectionNode, event);`
`796`	`796`	`if (dragMode) {`
`797`	`797`	`this.grid.cdr.detectChanges();`
	`798`	`+ if (isIE()) { this.grid.tbody.nativeElement.focus({ preventScroll: true }); }`
`798`	`799`	`}`
`799`	`800`	`}`
`800`	`801`
`@@ -808,6 +809,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {`
`808`	`809`	`this.grid.navigation.activeNode.gridID !== this.gridID))) { return; }`
`809`	`810`	`if (this.selectionService.pointerUp(this.selectionNode, this.grid.onRangeSelection)) {`
`810`	`811`	`this.grid.cdr.detectChanges();`
	`812`	`+ if (isIE()) { this.grid.tbody.nativeElement.focus({ preventScroll: true }); }`
`811`	`813`	`}`
`812`	`814`	`}`
`813`	`815`