Merge branch 'master' into ddincheva/summaryHeight-master

Author: ddincheva

projects/igniteui-angular/src/lib/chips/chip.component.html

@@ -12,7 +12,7 @@
     (enter)="onChipDragEnterHandler($event)"
     (dropped)="onChipDrop($event)">
 
-    <div [ngClass]="selectClass(selected)" (transitionend)="onSelectTransitionDone($event)">
+    <div #selectContainer [ngClass]="selectClass(selected)">
         <ng-container *ngTemplateOutlet="selectIconTemplate"></ng-container>
     </div>
 

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -21,6 +21,8 @@ import {
     IDropDroppedEventArgs
 } from '../directives/drag-drop/drag-drop.directive';
 import { IBaseEventArgs } from '../core/utils';
+import { fromEvent } from 'rxjs';
+import { take, filter } from 'rxjs/operators';
 
 
 export interface IBaseChipEventArgs extends IBaseEventArgs {
@@ -376,6 +378,12 @@ export class IgxChipComponent extends DisplayDensityBase {
     @ViewChild('chipArea', { read: ElementRef, static: true })
     public chipArea: ElementRef;
 
+    /**
+     * @hidden
+     */
+    @ViewChild('selectContainer', { read: ElementRef, static: true })
+    public selectContainer: ElementRef;
+
     /**
      * @hidden
      */
@@ -442,6 +450,10 @@ export class IgxChipComponent extends DisplayDensityBase {
             cancel: false
         };
 
+        fromEvent(this.selectContainer.nativeElement, 'transitionend')
+            .pipe(filter<TransitionEvent>(event => event.propertyName === 'width'), take(1))
+            .subscribe(event => this.onSelectTransitionDone(event));
+
         if (newValue && !this._selected) {
             onSelectArgs.selected = true;
             this.onSelection.emit(onSelectArgs);
@@ -463,7 +475,7 @@ export class IgxChipComponent extends DisplayDensityBase {
     }
 
     public onSelectTransitionDone(event) {
-        if (event.propertyName === 'width' && !!event.target.tagName) {
+        if (!!event.target.tagName) {
             // Trigger onSelectionDone on when `width` property is changed and the target is valid element(not comment).
             this.onSelectionDone.emit({
                 owner: this,

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -423,7 +423,7 @@ describe('IgxChip', () => {
         });
 
         await wait(400);
-        expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalled();
+        expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalledTimes(1);
         expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalledWith({
             originalEvent: null,
             owner: secondChipComp

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -430,13 +430,13 @@
     %igx-chip__select {
         display: inline-flex;
         align-items: center;
-        z-index: 1;
+        width: 18px;
         opacity: 1;
-        transition: opacity 120ms $ease-in-out-quad;
+        z-index: 1;
+        transition: opacity 120ms $ease-out-quad, width 120ms $ease-out-quad;
 
         > * {
-            width: 18px !important;
-            transition: width 120ms $ease-in-out-quad;
+            width: inherit !important;
         }
 
         + igx-prefix,
@@ -446,13 +446,10 @@
     }
 
     %igx-chip__select--hidden {
+        width: 0;
         opacity: 0;
         z-index: -1;
 
-        > * {
-            width: 0 !important;
-        }
-
         + igx-prefix,
         + [igxPrefix] {
             margin-#{$left}: 0;

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

@@ -401,7 +401,9 @@ export class IgxGridNavigationService {
             verticalScroll.scrollTop === verticalScroll.scrollHeight - this.grid.verticalScrollContainer.igxForContainerSize) {
             const rowIndex = this.grid.dataView.length - 1;
             const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement;
-            if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') {
+            const isRowTarget = row.tagName.toLowerCase() === 'igx-grid-groupby-row' ||
+            this.grid.isDetailRecord(this.grid.dataView[rowIndex]);
+            if (row && isRowTarget) {
                 row.focus();
                 return;
             }
@@ -413,7 +415,9 @@ export class IgxGridNavigationService {
                 .pipe(first()).subscribe(() => {
                     const rowIndex = this.grid.dataView.length - 1;
                     const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement;
-                    if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') {
+                    const isRowTarget = row.tagName.toLowerCase() === 'igx-grid-groupby-row' ||
+                    this.grid.isDetailRecord(this.grid.dataView[rowIndex]);
+                    if (row && isRowTarget) {
                         row.focus();
                         return;
                     }

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

@@ -139,7 +139,7 @@
             </igx-grid-summary-row>
         </ng-template>
         <ng-template #detail_template_container let-rowIndex="index" let-rowData>
-            <div detail='true' style="overflow:auto;width: 100%;" tabindex="0" #detailsContainer (keydown)='detailsKeyboardHandler($event, rowIndex, detailsContainer)' [attr.data-rowindex]='rowIndex'
+            <div detail='true' style="overflow:auto;width: 100%;" (focusin)='detailsViewFocused(detailsContainer, rowIndex)' tabindex="0" #detailsContainer (keydown)='detailsKeyboardHandler($event, rowIndex, detailsContainer)' [attr.data-rowindex]='rowIndex'
                 [ngClass]="{
                 'igx-grid__tr-container': true
             }">

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

@@ -1,6 +1,6 @@
 import {
     Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren,
-    QueryList, ViewChild, ElementRef, TemplateRef, DoCheck, AfterContentInit, HostBinding, forwardRef, OnInit, AfterViewInit
+    QueryList, ViewChild, ElementRef, TemplateRef, DoCheck, AfterContentInit, HostBinding, forwardRef, OnInit, AfterViewInit, HostListener
 } from '@angular/core';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseDirective } from '../grid-base.directive';
@@ -347,8 +347,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     }
 
     /**
-     *@hidden
-     */
+   *@hidden
+   */
     @Output()
     public groupingExpansionStateChange = new EventEmitter<IGroupByExpandState[]>();
 
@@ -553,6 +553,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
 
     private _expansionStates: Map<any, boolean> = new Map<any, boolean>();
 
+
     /**
      * Returns a list of key-value pairs [row ID, expansion state]. Includes only states that differ from the default one.
      * ```typescript
@@ -571,6 +572,14 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     @Output()
     public expansionStatesChange = new EventEmitter<Map<any, boolean>>();
 
+    /**
+     *@hidden
+     */
+    @Output()
+    private _focusIn = new  EventEmitter<any>();
+    @HostListener('focusin') onFocusIn() {
+        this._focusIn.emit();
+    }
 
     /**
      * Sets a list of key-value pairs [row ID, expansion state].
@@ -682,8 +691,21 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             this.verticalScrollContainer.addScrollTop(evt.target.scrollTop);
             evt.target.scrollTop = 0;
             this.verticalScrollContainer.onChunkLoad.pipe(first()).subscribe(() => {
-                // Some browsers (like Edge/IE) lose focus after scrolling.
-                (activeElem as any).focus();
+                const active = this.selectionService.activeElement;
+                const currRow = (this.navigation as any).getRowByIndex(active.row, '');
+                // check if the focused element was a child of the details view
+                if (this.isDetailRecord(active.row) && currRow && currRow.contains(activeElem)) {
+                    // Some browsers (like Edge/IE) lose focus after scrolling even when the element was in the DOM.
+                    (activeElem as any).focus({ preventScroll: true });
+                    return;
+                }
+                const nextCellTarget = this.navigation.getCellElementByVisibleIndex(active.row, active.column);
+                const nextRowTarget = (this.navigation as any).getRowByIndex(active.row + 1, '');
+                if (nextCellTarget) {
+                    nextCellTarget.focus({ preventScroll: true });
+                } else if (nextRowTarget) {
+                    nextRowTarget.focus({ preventScroll: true });
+                }
             });
         }
     }
@@ -698,6 +720,13 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         return rec;
     }
 
+    public detailsViewFocused(container, rowIndex) {
+        this.selectionService.activeElement = {
+            row: rowIndex,
+            column: this.selectionService.activeElement ? this.selectionService.activeElement.column : 0
+        };
+    }
+
     public detailsKeyboardHandler(event, rowIndex, container) {
         const colIndex = this.selectionService.activeElement ? this.selectionService.activeElement.column : 0;
         const shift = event.shiftKey;
@@ -706,12 +735,20 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         const target = event.target;
         if (key === 'tab') {
             event.stopPropagation();
+            const lastColIndex = this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex;
             if (shift && target === container) {
                 // shift + tab from details to data row
                 event.preventDefault();
-                const lastColIndex = this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex;
                 this.navigateTo(rowIndex - 1, lastColIndex,
                     (args) => args.target.nativeElement.focus());
+            } else if (!shift) {
+                // when the next element is focused via tab check if it is an element outside the details view
+                // if so we have exited the details view and focus should move to the first cell in the next row
+                this._focusIn.pipe(first()).subscribe(() => {
+                    if (!container.contains(document.activeElement)) {
+                      this.navigation.performTab(container, {row: rowIndex, column: lastColIndex});
+                    }
+                });
             }
         } else if (key === 'arrowup' && !ctrl && target === container) {
             this.navigation.navigateUp(container, {row: rowIndex, column: colIndex});