Merge branch 'master' into mkirova/fix-7315

Author: kdinev

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html

@@ -1,9 +1,10 @@
 <div #toggle="toggle" igxToggle class="igx-date-picker" [class.igx-date-picker--dropdown]="mode === 'dropdown'"
     (onOpening)="handleOpening($event)" (onOpened)="handleOpened()"
     (onClosing)="handleClosing($event)" (onClosed)="handleClosed()"
+    [style.flex-basis]="monthsViewNumber * 320 + 'px'"
     [style.width]="monthsViewNumber * 320 + 'px'"
     [style.max-width]="'90vw'"
-    >
+>
     <!-- TODO: use IgxCalendarContainerComponent instead -->
     <igx-calendar #calendar (keydown)="onKeyDown($event)" selection="range" [weekStart]="weekStart"
         [hideOutsideDays]="hideOutsideDays" [monthsViewNumber]="monthsViewNumber" [locale]="locale"
@@ -48,7 +49,7 @@
             [attr.aria-expanded]="!toggle.collapsed"
             [attr.aria-labelledby]="this.label?.id"
             [value]="this.value | dateRange: this.inputFormat : this.locale"
-            />
+        />
 
         <igx-prefix *ngIf="!this.toggleComponents.length">
             <ng-container *ngTemplateOutlet="defIcon"></ng-container>

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

@@ -763,7 +763,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             return;
         }
         this.selectionService.pointerDown(this.selectionNode, event.shiftKey, event.ctrlKey);
-        this.grid.navigation.activeNode = {row: this.rowIndex, column: this.visibleColumnIndex, layout: this.selectionNode.layout };
         this.activate(event);
     }
 
@@ -818,7 +817,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     @HostListener('click', ['$event'])
     public onClick(event: MouseEvent) {
         if (this.cellSelectionMode !== GridSelectionMode.multiple) {
-            this.grid.navigation.activeNode = this.selectionNode;
             this.activate(event);
         }
         this.grid.onCellClick.emit({
@@ -845,6 +843,14 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     public activate(event: FocusEvent | KeyboardEvent) {
         const node = this.selectionNode;
+
+        if (this.grid.navigation.activeNode) {
+            Object.assign(this.grid.navigation.activeNode, {row: this.rowIndex, column: this.visibleColumnIndex});
+        } else {
+            const layout = this.column.columnLayoutChild ? this.grid.navigation.layout(this.visibleColumnIndex) : null;
+            this.grid.navigation.activeNode = { row: this.rowIndex, column: this.visibleColumnIndex, layout: layout };
+        }
+
         const shouldEmitSelection = !this.selectionService.isActiveNode(node);
 
         if (this.selectionService.primaryButton) {

projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts

@@ -284,7 +284,11 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
         return column.rowEnd && column.rowEnd - column.rowStart ? column.rowStart + column.rowEnd - column.rowStart : column.rowStart + 1;
     }
 
-    private layout(visibleIndex) {
+    /**
+     * @hidden
+     * @internal
+     */
+    public layout(visibleIndex) {
         const column = this.grid.getColumnByVisibleIndex(visibleIndex);
         return {colStart: column.colStart, rowStart: column.rowStart,
                 colEnd: column.colEnd, rowEnd: column.rowEnd, columnVisibleIndex: column.visibleIndex };

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

@@ -207,8 +207,8 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
 
             const cell = grid.getCellByColumn(0, 'col0');
             expect(cell).toBeDefined();
-            expect(cell.active).toBeTruthy();
-            expect(cell.selected).toBeTruthy();
+            GridSelectionFunctions.verifyCellActive(cell);
+            GridSelectionFunctions.verifyCellSelected(cell);
         });
 
         it('should allow navigating down', async () => {
@@ -566,10 +566,10 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             await wait(200);
             fix.detectChanges();
 
-
             const target = grid.getCellByColumn(15, '1');
             expect(target).toBeDefined();
-            expect(target.selected).toBeTruthy();
+            GridSelectionFunctions.verifyCellSelected(target);
+            GridSelectionFunctions.verifyCellActive(target);
         });
 
         it('Custom KB navigation: should be able to scroll horizontally and vertically to a cell in the grid', async () => {
@@ -588,7 +588,8 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
 
             const target = grid.getCellByColumn(50, '50');
             expect(target).toBeDefined();
-            expect(target.selected).toBeTruthy();
+            GridSelectionFunctions.verifyCellSelected(target);
+            GridSelectionFunctions.verifyCellActive(target);
         });
 
         it('Custom KB navigation: onGridKeydown should be emitted', async () => {

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

@@ -21,7 +21,7 @@ import { IgxGridExpandableCellComponent } from '../grids/grid/expandable-cell.co
 
 const SUMMARY_LABEL_CLASS = '.igx-grid-summary__label';
 const SUMMARY_ROW = 'igx-grid-summary-row';
-const CELL_ACTIVE_CSS_CLASS = 'igx-grid-summary--active';
+const SUMMARY_CELL_ACTIVE_CSS_CLASS = 'igx-grid-summary--active';
 const FILTER_UI_CELL = 'igx-grid-filtering-cell';
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
 const FILTER_UI_CONNECTOR = 'igx-filtering-chips__connector';
@@ -46,6 +46,7 @@ const ACTIVE_GROUP_ROW_CLASS = 'igx-grid__group-row--active';
 const ACTIVE_HEADER_CLASS = 'igx-grid__th--active';
 const GROUP_ROW_CLASS = 'igx-grid-groupby-row';
 const CELL_SELECTED_CSS_CLASS = 'igx-grid__td--selected';
+const CELL_ACTIVE_CSS_CLASS = 'igx-grid__td--active';
 const ROW_DIV_SELECTION_CHECKBOX_CSS_CLASS = 'igx-grid__cbx-selection';
 const ROW_SELECTION_CSS_CLASS = 'igx-grid__tr--selected';
 const HEADER_ROW_CSS_CLASS = '.igx-grid__thead';
@@ -2045,7 +2046,7 @@ export class GridSummaryFunctions {
         const summaryRow = typeof row === 'number' ?
             GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, row) : row;
         const summ = GridSummaryFunctions.getSummaryCellByVisibleIndex(summaryRow, cellIndex);
-        const hasClass = summ.nativeElement.classList.contains(CELL_ACTIVE_CSS_CLASS);
+        const hasClass = summ.nativeElement.classList.contains(SUMMARY_CELL_ACTIVE_CSS_CLASS);
         expect(hasClass === active).toBeTruthy();
     }
 
@@ -2132,6 +2133,11 @@ export class GridSelectionFunctions {
         expect(cell.nativeElement.classList.contains(CELL_SELECTED_CSS_CLASS)).toBe(selected);
     }
 
+    public static verifyCellActive(cell, active = true) {
+        expect(cell.active).toBe(active);
+        expect(cell.nativeElement.classList.contains(CELL_ACTIVE_CSS_CLASS)).toBe(active);
+    }
+
     // Check the grid selected cell and cell in in the onSelection function
     public static verifyGridCellSelected(fix, cell: IgxGridCellComponent) {
         const selectedCellFromGrid = cell.grid.selectedCells[0];