chore(*): Removing handling for tab/shift+tab from/to last element focusable element in details view. Updating tests.

Author: MKirova

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

@@ -562,10 +562,6 @@ export class IgxGridNavigationService {
             let target = currentRowEl.previousElementSibling;
             const applyFocusFunc = () => {
                     target = this.getRowByIndex(rowIndex - 1, '');
-                    const focusable = target.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                    if (focusable.length > 0 ) {
-                        target =  focusable[focusable.length - 1];
-                    }
                     target.focus({ preventScroll: true });
             };
             if (target) {

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

@@ -94,7 +94,7 @@
 </div>
 
 <div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
-    <div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event"
+    <div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
         [style.height.px]='calcHeight' [style.width.px]='calcWidth || null' #tbody>
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"

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

@@ -15,7 +15,7 @@ import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.
 import { IBaseChipEventArgs, IChipClickEventArgs, IChipKeyDownEventArgs } from '../../chips/chip.component';
 import { IChipsAreaReorderEventArgs } from '../../chips/chips-area.component';
 import { IgxColumnComponent } from '../columns/column.component';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, first } from 'rxjs/operators';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
 import { IgxColumnResizingService } from '../resizing/resizing.service';
@@ -675,6 +675,18 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         };
     }
 
+    public preventContainerScroll(evt) {
+        if (evt.target.scrollTop !== 0) {
+            const activeElem = document.activeElement;
+            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();
+            });
+        }
+    }
+
     public detailsKeyboardHandler(event, rowIndex, container) {
         const colIndex = this.selectionService.activeElement ? this.selectionService.activeElement.column : 0;
         const shift = event.shiftKey;
@@ -689,15 +701,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
                 const lastColIndex = this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex;
                 this.navigateTo(rowIndex - 1, lastColIndex,
                     (args) => args.target.nativeElement.focus());
-            } else if (!shift) {
-                const focusable = container
-                .querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                const lastFocusable = focusable[focusable.length - 1];
-                if (lastFocusable === target || (focusable.length === 0 && container === target)) {
-                    event.preventDefault();
-                    this.navigateTo(rowIndex + 1, 0,
-                        (args) => args.target.nativeElement.focus());
-                }
             }
         } else if (key === 'arrowup' && !ctrl && target === container) {
             this.navigation.navigateUp(container, {row: rowIndex, column: colIndex});

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

@@ -395,32 +395,24 @@ describe('IgxGrid Master Detail #grid', () => {
             expect(GridFunctions.elementInGridView(grid, detailRow)).toBeTruthy();
         });
 
-        it(`Should focus detail row first, then continue to the focusable elements in
-         it and continue onto the next row when using Tab.`, async() => {
+        it(`Should focus detail row after hitting Tab on last cell in prev data row.`, async() => {
             const row = grid.getRowByIndex(0) as IgxGridRowComponent;
             const targetCellElement = grid.getCellByColumn(0, 'CompanyName');
             UIInteractions.triggerKeyDownEvtUponElem('tab', targetCellElement, true);
             await wait(DEBOUNCETIME);
             fix.detectChanges();
             const detailRow = GridFunctions.getMasterRowDetail(row);
             expect(document.activeElement).toBe(detailRow);
-            const lastTabbable = detailRow.querySelector('input[name="Comment"]');
-            UIInteractions.triggerKeyDownEvtUponElem('tab', lastTabbable, true);
-            await wait(DEBOUNCETIME);
-            fix.detectChanges();
-            expect(document.activeElement).toBe(grid.getCellByColumn(2, 'ContactName').nativeElement);
          });
 
-         it(`Should focus the last focusable element in detail first
-         and go in reverse order of all elements when tabbing through detail view using Shift+Tab.`, async() => {
+         it(`Should focus detail row after hitting Shift+Tab on first cell in next data row and continue to the prev row.`, async() => {
             const prevRow = grid.getRowByIndex(0) as IgxGridRowComponent;
             const targetCellElement = grid.getCellByColumn(2, 'ContactName');
             UIInteractions.triggerKeyDownEvtUponElem('tab', targetCellElement, true, false, true);
             await wait(DEBOUNCETIME);
             fix.detectChanges();
             const detailRow = GridFunctions.getMasterRowDetail(prevRow);
-            const lastTabbable = detailRow.querySelector('input[name="Comment"]');
-            expect(document.activeElement).toBe(lastTabbable);
+            expect(document.activeElement).toBe(detailRow);
             UIInteractions.triggerKeyDownEvtUponElem('tab', detailRow, true, false, true);
             await wait(DEBOUNCETIME);
             fix.detectChanges();