+
filter_list
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts
index 410aeb61eb1..2276e0aedff 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts
@@ -17,6 +17,7 @@ import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../
import { IgxFilteringService, ExpressionUI } from './grid-filtering.service';
import { KEYS, cloneArray } from '../../core/utils';
import { IgxGridNavigationService } from '../grid-navigation.service';
+import { IgxGridGroupByRowComponent } from '../grid';
/**
* @hidden
@@ -96,7 +97,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
}
ngOnInit(): void {
- this.filteringService.columnToChipToFocus.set(this.column.field, false);
this.filteringService.columnToMoreIconHidden.set(this.column.field, true);
}
@@ -104,44 +104,49 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
this.updateFilterCellArea();
}
- @HostListener('keydown.shift.tab', ['$event'])
@HostListener('keydown.tab', ['$event'])
public onTabKeyDown(eventArgs) {
- if (eventArgs.shiftKey) {
- if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) {
- eventArgs.preventDefault();
- this.filteringService.grid.headerContainer.scrollTo(this.column.visibleIndex - 1);
- } else if (this.column.visibleIndex === 0) {
- eventArgs.preventDefault();
+ const pinnedColumns = this.filteringService.grid.pinnedColumns;
+ const nextIndex = this.column.visibleIndex + 1 - pinnedColumns.length;
+
+ if (this.isLastElementFocused()) {
+ if (nextIndex < this.filteringService.grid.unpinnedColumns.length &&
+ pinnedColumns.indexOf(this.column) === pinnedColumns.length - 1 &&
+ !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex + 1)) {
+ this.ScrollToChip(0, true);
+ eventArgs.stopPropagation();
+ return;
}
- } else {
if (this.column.visibleIndex === this.filteringService.grid.columnList.length - 1) {
- if (this.currentTemplate === this.defaultFilter) {
- if (this.isMoreIconVisible() === false) {
- if (this.moreIcon.nativeElement === document.activeElement) {
- this.navService.goToFirstCell();
- }
- } else if (this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__item`) ===
- document.activeElement) {
- this.navService.goToFirstCell();
+ if (!this.filteringService.grid.filteredData || this.filteringService.grid.filteredData.length > 0) {
+ if (this.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) {
+ eventArgs.stopPropagation();
+ return;
}
- } else {
this.navService.goToFirstCell();
}
- } else if (!this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) {
eventArgs.preventDefault();
- this.filteringService.grid.headerContainer.scrollTo(this.column.visibleIndex + 1);
+ } else if (!this.column.pinned && !this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) {
+ eventArgs.preventDefault();
+ this.ScrollToChip(nextIndex, true);
}
}
-
eventArgs.stopPropagation();
}
- /**
- * Returns the chip to be focused.
- */
- public getChipToFocus() {
- return this.filteringService.columnToChipToFocus.get(this.column.field);
+ @HostListener('keydown.shift.tab', ['$event'])
+ public onShiftTabKeyDown(eventArgs) {
+ if (this.isFirstElementFocused()) {
+ const prevIndex = this.column.visibleIndex - 1 - this.filteringService.grid.pinnedColumns.length;
+
+ if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) {
+ eventArgs.preventDefault();
+ this.ScrollToChip(prevIndex, false);
+ } else if (this.column.visibleIndex === 0) {
+ eventArgs.preventDefault();
+ }
+ }
+ eventArgs.stopPropagation();
}
/**
@@ -199,6 +204,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
public onChipRemoved(eventArgs: IBaseChipEventArgs, item: ExpressionUI): void {
const indexToRemove = this.expressionsList.indexOf(item);
this.removeExpression(indexToRemove);
+ this.focusChip();
}
/**
@@ -224,20 +230,20 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
*/
public filteringIndicatorClass() {
return {
- [this.baseClass]: !this.isMoreIconVisible(),
- [`${this.baseClass}--hidden`]: this.isMoreIconVisible()
+ [this.baseClass]: !this.isMoreIconHidden(),
+ [`${this.baseClass}--hidden`]: this.isMoreIconHidden()
};
}
/**
* Focus a chip depending on the current visible template.
*/
- public focusChip() {
+ public focusChip(focusFirst: boolean = false) {
if (this.currentTemplate === this.defaultFilter) {
- if (this.isMoreIconVisible() === false) {
- this.moreIcon.nativeElement.focus();
+ if (focusFirst) {
+ this.focusFirstElement();
} else {
- this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
+ this.focusElement();
}
} else if (this.currentTemplate === this.emptyFilter) {
this.ghostChip.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
@@ -264,7 +270,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
this.filteringService.filter(this.column.field, this.rootExpressionsTree);
}
- private isMoreIconVisible(): boolean {
+ private isMoreIconHidden(): boolean {
return this.filteringService.columnToMoreIconHidden.get(this.column.field);
}
@@ -309,4 +315,52 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
this.cdr.detectChanges();
}
}
+
+ private ScrollToChip(columnIndex: number, shouldFocusNext: boolean) {
+ this.filteringService.grid.nativeElement.focus({preventScroll: true});
+ this.filteringService.columnToFocus = this.filteringService.grid.unpinnedColumns[columnIndex];
+ this.filteringService.shouldFocusNext = shouldFocusNext;
+ this.filteringService.grid.headerContainer.scrollTo(columnIndex);
+ }
+
+ private isFirstElementFocused(): boolean {
+ return !(this.chipsArea && this.chipsArea.chipsList.length > 0 &&
+ this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`) !== document.activeElement);
+ }
+
+ private isLastElementFocused(): boolean {
+ if (this.chipsArea) {
+ if (this.isMoreIconHidden() && this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__remove`) !==
+ document.activeElement) {
+ return false;
+ } else if (!this.isMoreIconHidden() && this.moreIcon.nativeElement !== document.activeElement) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ private focusFirstElement(): void {
+ if (this.chipsArea.chipsList.length > 0) {
+ this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
+ } else {
+ this.moreIcon.nativeElement.focus();
+ }
+ }
+
+ private focusElement(): void {
+ if (this.filteringService.shouldFocusNext) {
+ if (!this.isMoreIconHidden() && this.chipsArea.chipsList.length === 0) {
+ this.moreIcon.nativeElement.focus();
+ } else {
+ this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
+ }
+ } else {
+ if (!this.isMoreIconHidden()) {
+ this.moreIcon.nativeElement.focus();
+ } else {
+ this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__remove`).focus();
+ }
+ }
+ }
}
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html
index 57049f5996b..33db66551f7 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html
@@ -48,9 +48,9 @@
@@ -108,6 +108,6 @@
-
+
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts
index 0edb07a71d3..479bab93214 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts
@@ -163,6 +163,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
this.unaryConditionChanged.unsubscribe();
}
+ @HostListener('keydown.shift.tab', ['$event'])
@HostListener('keydown.tab', ['$event'])
public onTabKeydown(event) {
event.stopPropagation();
@@ -299,6 +300,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
public clearFiltering() {
this.filteringService.clearFilter(this.column.field);
this.resetExpression();
+ if (this.input) {
+ this.input.nativeElement.focus();
+ }
this.cdr.detectChanges();
this.chipAreaScrollOffset = 0;
@@ -338,6 +342,9 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
});
}
+ this.filteringService.updateFilteringCell(this.column.field);
+ this.filteringService.focusFilterCellChip(this.column.field, true);
+
this.filteringService.isFilterRowVisible = false;
this.filteringService.filteredColumn = null;
this.filteringService.selectedExpression = null;
@@ -347,6 +354,15 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
this.transform(this.chipAreaScrollOffset);
}
+ /*
+ * Opens date-picker if condition is not unary
+ */
+ public openDatePicker(openDialog: Function) {
+ if (!this.expression.condition.isUnary) {
+ openDialog();
+ }
+ }
+
/**
* Opens the conditions dropdown.
*/
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
index 33ac282b511..31c5327ef04 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
@@ -37,14 +37,15 @@ export class IgxFilteringService implements OnDestroy {
private filterPipe = new IgxGridFilterConditionPipe();
private titlecasePipe = new TitleCasePipe();
private datePipe = new DatePipe(window.navigator.language);
+ private columnStartIndex = -1;
public gridId: string;
public isFilterRowVisible = false;
public filteredColumn = null;
public selectedExpression: IFilteringExpression = null;
- public columnToChipToFocus = new Map
();
+ public columnToFocus = null;
+ public shouldFocusNext = false;
public columnToMoreIconHidden = new Map();
- public columnStartIndex = -1;
constructor(private gridAPI: GridBaseAPIService, private iconService: IgxIconService) {}
@@ -73,12 +74,12 @@ export class IgxFilteringService implements OnDestroy {
this.columnStartIndex = eventArgs.startIndex;
this.grid.filterCellList.forEach((filterCell) => {
filterCell.updateFilterCellArea();
- if (filterCell.getChipToFocus()) {
- this.columnToChipToFocus.set(filterCell.column.field, false);
- filterCell.focusChip();
- }
});
}
+ if (this.columnToFocus) {
+ this.focusFilterCellChip(this.columnToFocus.field, false);
+ this.columnToFocus = null;
+ }
});
this.grid.onColumnMovingEnd.pipe(takeUntil(this.destroy$)).subscribe((event) => {
@@ -204,6 +205,14 @@ export class IgxFilteringService implements OnDestroy {
for (let i = 0; i < expressionsList.length; i++) {
currExpressionUI = expressionsList[i];
+ if (!currExpressionUI.expression.condition.isUnary && currExpressionUI.expression.searchVal === null) {
+ if (currExpressionUI.afterOperator === FilteringLogic.And && !currAndBranch) {
+ currAndBranch = new FilteringExpressionsTree(FilteringLogic.And, columnId);
+ expressionsTree.filteringOperands.push(currAndBranch);
+ }
+ continue;
+ }
+
if ((currExpressionUI.beforeOperator === undefined || currExpressionUI.beforeOperator === null ||
currExpressionUI.beforeOperator === FilteringLogic.Or) &&
currExpressionUI.afterOperator === FilteringLogic.And) {
@@ -260,13 +269,26 @@ export class IgxFilteringService implements OnDestroy {
}
}
- private updateFilteringCell(columnId: string) {
+ /**
+ * Updates the content of a filterCell.
+ */
+ public updateFilteringCell(columnId: string) {
const filterCell = this.grid.filterCellList.find(cell => cell.column.field === columnId);
if (filterCell) {
filterCell.updateFilterCellArea();
}
}
+ /**
+ * Focus a chip in a filterCell.
+ */
+ public focusFilterCellChip(columnId: string, focusFirst: boolean) {
+ const filterCell = this.grid.filterCellList.find(cell => cell.column.field === columnId);
+ if (filterCell) {
+ filterCell.focusChip(focusFirst);
+ }
+ }
+
private isFilteringTreeComplex(expressions: IFilteringExpressionsTree | IFilteringExpression): boolean {
if (!expressions) {
return false;
diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
index 0a53edd25b3..07641cbcd14 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { IgxGridBaseComponent } from './grid-base.component';
import { first } from 'rxjs/operators';
import { IgxColumnComponent } from './column.component';
+import { IgxGridRowComponent } from './grid/grid-row.component';
enum MoveDirection {
LEFT = 'left',
@@ -36,26 +37,35 @@ export class IgxGridNavigationService {
}
public isColumnFullyVisible(visibleColumnIndex: number) {
- const horizontalScroll = this.grid.dataRowList.first.virtDirRow.getHorizontalScroll();
+ let forOfDir;
+ if (this.grid.dataRowList.length > 0) {
+ forOfDir = this.grid.dataRowList.first.virtDirRow;
+ } else {
+ forOfDir = this.grid.headerContainer;
+ }
+ const horizontalScroll = forOfDir.getHorizontalScroll();
if (!horizontalScroll.clientWidth ||
this.grid.columnList.filter(c => !c.columnGroup).find((column) => column.visibleIndex === visibleColumnIndex).pinned) {
return true;
}
const index = this.getColumnUnpinnedIndex(visibleColumnIndex);
- return this.displayContainerWidth >=
- this.grid.dataRowList.first.virtDirRow.getColumnScrollLeft(index + 1) -
- this.displayContainerScrollLeft;
+ return this.displayContainerWidth >= forOfDir.getColumnScrollLeft(index + 1) - this.displayContainerScrollLeft;
}
public isColumnLeftFullyVisible(visibleColumnIndex) {
- const horizontalScroll = this.grid.dataRowList.first.virtDirRow.getHorizontalScroll();
+ let forOfDir;
+ if (this.grid.dataRowList.length > 0) {
+ forOfDir = this.grid.dataRowList.first.virtDirRow;
+ } else {
+ forOfDir = this.grid.headerContainer;
+ }
+ const horizontalScroll = forOfDir.getHorizontalScroll();
if (!horizontalScroll.clientWidth ||
this.grid.columnList.filter(c => !c.columnGroup).find((column) => column.visibleIndex === visibleColumnIndex).pinned) {
return true;
}
const index = this.getColumnUnpinnedIndex(visibleColumnIndex);
- return this.displayContainerScrollLeft <=
- this.grid.dataRowList.first.virtDirRow.getColumnScrollLeft(index);
+ return this.displayContainerScrollLeft <= forOfDir.getColumnScrollLeft(index);
}
public get gridOrderedColumns(): IgxColumnComponent[] {
@@ -256,14 +266,6 @@ export class IgxGridNavigationService {
public navigateUp(rowElement, currentRowIndex, visibleColumnIndex) {
if (currentRowIndex === 0) {
- this.grid.rowList.first.cells.first._clearCellSelection();
-
- if (this.grid.allowFiltering) {
- const visColLength = this.grid.visibleColumns.length;
- this.grid.headerContainer.scrollTo(visColLength - 1);
- this.grid.filteringService.columnToChipToFocus.set(this.grid.visibleColumns[visColLength - 1].field, true);
- }
-
return;
}
const containerTopOffset = parseInt(this.verticalDisplayContainerElement.style.top, 10);
@@ -413,14 +415,30 @@ export class IgxGridNavigationService {
}
}
+ public moveFocusToFilterCell() {
+ this.grid.rowList.find(row => row instanceof IgxGridRowComponent).cells.first._clearCellSelection();
+ const visColLength = this.grid.unpinnedColumns.length;
+ if (this.isColumnFullyVisible(visColLength - 1)) {
+ this.grid.filteringService.focusFilterCellChip(this.grid.filterCellList.last.column.field, false);
+ } else {
+ this.grid.filteringService.columnToFocus = this.grid.unpinnedColumns[visColLength - 1];
+ this.grid.filteringService.shouldFocusNext = false;
+ this.grid.headerContainer.scrollTo(visColLength - 1);
+ }
+ }
+
public performShiftTabKey(currentRowEl, rowIndex, visibleColumnIndex) {
if (visibleColumnIndex === 0) {
if (this.isRowInEditMode(rowIndex)) {
this.grid.rowEditTabs.last.element.nativeElement.focus();
return;
}
- this.navigateUp(currentRowEl, rowIndex,
- this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex);
+ if (rowIndex === 0 && this.grid.allowFiltering) {
+ this.moveFocusToFilterCell();
+ } else {
+ this.navigateUp(currentRowEl, rowIndex,
+ this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex);
+ }
} else {
const cell = currentRowEl.querySelector(`igx-grid-cell[data-visibleIndex="${visibleColumnIndex}"]`);
if (cell) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
index 893bdf43424..a7774dd4b7b 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -57,7 +57,7 @@
-
@@ -67,7 +67,7 @@
-
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
index eae02c2721c..b3e90c922be 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
@@ -207,8 +207,12 @@ export class IgxGridGroupByRowComponent {
break;
case 'tab':
if (event.shiftKey) {
- this.grid.navigation.navigateUp(this.nativeElement, this.index,
- this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex);
+ if (this.index === 0) {
+ this.grid.navigation.moveFocusToFilterCell();
+ } else {
+ this.grid.navigation.navigateUp(this.nativeElement, this.index,
+ this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex);
+ }
} else {
this.grid.navigation.navigateDown(this.nativeElement, this.index, 0);
}
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts
index c224ae07344..3c02da56685 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-keyBoardNav.spec.ts
@@ -286,8 +286,10 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
UIInteractions.triggerKeyDownEvtUponElem('Enter', cell.nativeElement, true);
await wait(DEBOUNCETIME);
- expect(cell.inEditMode).toBe(true);
+ fix.detectChanges();
+ cell = treeGrid.getCellByColumn(5, 'OnPTO');
+ expect(cell.inEditMode).toBe(true);
// Press tab key and verify the correct cell is opened
await TreeGridFunctions.moveEditableCellWithTab(fix, treeGrid, 5, 4, treeColumns);
});
@@ -310,7 +312,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
await testNavigationTab(fix, treeGrid, ['HireDate', 'ID', 'Name', 'Age', 'OnPTO']);
});
- it('should change correct selected cell when there are pinned columns and press tab', async () => {
+ it('should change correct selected cell when there are pinned columns and press shift + tab', async () => {
treeGrid.getColumnByName('HireDate').pinned = true;
fix.detectChanges();
@@ -338,7 +340,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell);
UIInteractions.triggerKeyDownEvtUponElem('Space', cell.nativeElement, true);
- await wait(30);
+ await wait(DEBOUNCETIME);
fix.detectChanges();
TreeGridFunctions.verifyDataRowsSelection(fix, [0], true);
@@ -620,7 +622,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
expect(treegrid.onSelection.emit).toHaveBeenCalledTimes(1);
cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', ctrlKey: true }));
- await wait(DEBOUNCETIME);
+ await wait(100);
fixture.detectChanges();
cell = treegrid.getCellByColumn(9, columns[columns.length - 1]);
@@ -629,7 +631,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
expect(treegrid.onSelection.emit).toHaveBeenCalledTimes(2);
cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', ctrlKey: true }));
- await wait(DEBOUNCETIME);
+ await wait(100);
fixture.detectChanges();
cell = treegrid.getCellByColumn(0, columns[0]);
@@ -638,7 +640,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
expect(treegrid.onSelection.emit).toHaveBeenCalledTimes(3);
cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', ctrlKey: true }));
- await wait(DEBOUNCETIME);
+ await wait(100);
fixture.detectChanges();
cell = treegrid.getCellByColumn(9, columns[columns.length - 1]);
@@ -735,7 +737,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
(fixture, treegrid: IgxTreeGridComponent, cellRowIndex, cellColumn, rowsCount, rowsCountAfterCollapse) =>
new Promise(async (resolve, reject) => {
spyOn(treegrid.onRowToggle, 'emit').and.callThrough();
- const cell = treegrid.getCellByColumn(cellRowIndex, cellColumn);
+ let cell = treegrid.getCellByColumn(cellRowIndex, cellColumn);
let rows = TreeGridFunctions.getAllRows(fixture);
expect(rows.length).toBe(rowsCount);
@@ -750,6 +752,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
await wait(DEBOUNCETIME);
fixture.detectChanges();
+ cell = treegrid.getCellByColumn(cellRowIndex, cellColumn);
rows = TreeGridFunctions.getAllRows(fixture);
expect(rows.length).toBe(rowsCountAfterCollapse);
TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[cellRowIndex]);
@@ -761,6 +764,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
await wait(DEBOUNCETIME);
fixture.detectChanges();
+ cell = treegrid.getCellByColumn(cellRowIndex, cellColumn);
rows = TreeGridFunctions.getAllRows(fixture);
expect(rows.length).toBe(rowsCountAfterCollapse);
TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[cellRowIndex]);
@@ -772,6 +776,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
await wait(DEBOUNCETIME);
fixture.detectChanges();
+ cell = treegrid.getCellByColumn(cellRowIndex, cellColumn);
rows = TreeGridFunctions.getAllRows(fixture);
expect(rows.length).toBe(rowsCount);
TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[cellRowIndex]);
@@ -783,6 +788,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
await wait(DEBOUNCETIME);
fixture.detectChanges();
+ cell = treegrid.getCellByColumn(cellRowIndex, cellColumn);
rows = TreeGridFunctions.getAllRows(fixture);
expect(rows.length).toBe(rowsCount);
TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[cellRowIndex]);
@@ -822,7 +828,7 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
const testEditingNavigationShiftTab =
(fixture, treegrid: IgxTreeGridComponent, columns) => new Promise(async (resolve, reject) => {
- const cell = treeGrid.getCellByColumn(2, columns[2]);
+ let cell = treeGrid.getCellByColumn(2, columns[2]);
cell.nativeElement.dispatchEvent(new Event('focus'));
await wait(DEBOUNCETIME);
@@ -833,6 +839,8 @@ describe('IgxTreeGrid - Key Board Navigation', () => {
UIInteractions.triggerKeyDownEvtUponElem('Enter', cell.nativeElement, true);
await wait(DEBOUNCETIME);
fixture.detectChanges();
+
+ cell = treeGrid.getCellByColumn(2, columns[2]);
expect(cell.inEditMode).toBe(true);
// Test on parent row
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
index 288da019709..34569aa7232 100644
--- 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
@@ -34,7 +34,7 @@
-
@@ -44,7 +44,7 @@
-
diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts
index 5028251be98..12daf4a7af7 100644
--- a/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts
@@ -331,7 +331,7 @@ export class TreeGridFunctions {
firstColumnName: string,
nextColumnName: string,
moveRight: boolean = true) => new Promise(async (resolve, reject) => {
- const cell = treeGrid.getCellByColumn(rowIndex, firstColumnName);
+ let cell = treeGrid.getCellByColumn(rowIndex, firstColumnName);
const keyboardEventKey = moveRight ? 'ArrowRight' : 'ArrowLeft';
UIInteractions.triggerKeyDownEvtUponElem(keyboardEventKey, cell.nativeElement, true);
@@ -339,6 +339,7 @@ export class TreeGridFunctions {
fix.detectChanges();
const newCell = treeGrid.getCellByColumn(rowIndex, nextColumnName);
+ cell = treeGrid.getCellByColumn(rowIndex, firstColumnName);
if (cell !== undefined && cell !== null) {
TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell, false);
}
@@ -361,14 +362,15 @@ export class TreeGridFunctions {
fix.detectChanges();
cell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex]);
+ if (cell !== undefined && cell !== null) {
+ TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell, false);
+ }
+
if (columnIndex === columns.length - 1) {
newCell = treeGrid.getCellByColumn(rowIndex + 1, columns[0]);
} else {
newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex + 1]);
}
- if (cell !== undefined && cell !== null) {
- TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, cell, false);
- }
TreeGridFunctions.verifyTreeGridCellSelected(treeGrid, newCell);
expect(newCell.focused).toEqual(true);
@@ -415,15 +417,15 @@ export class TreeGridFunctions {
fix.detectChanges();
cell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex]);
+ if (cell !== undefined && cell !== null) {
+ expect(cell.inEditMode).toBe(false);
+ }
+
if (columnIndex === columns.length - 1) {
newCell = treeGrid.getCellByColumn(rowIndex + 1, columns[0]);
} else {
newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex + 1]);
}
-
- if (cell !== undefined && cell !== null) {
- expect(cell.inEditMode).toBe(false);
- }
expect(newCell.inEditMode).toBe(true);
resolve();
})
@@ -441,15 +443,15 @@ export class TreeGridFunctions {
fix.detectChanges();
cell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex]);
+ if (cell !== undefined && cell !== null) {
+ expect(cell.inEditMode).toBe(false);
+ }
+
if (columnIndex === 0) {
newCell = treeGrid.getCellByColumn(rowIndex - 1, columns[columns.length - 1]);
} else {
newCell = treeGrid.getCellByColumn(rowIndex, columns[columnIndex - 1]);
}
-
- if (cell !== undefined && cell !== null) {
- expect(cell.inEditMode).toBe(false);
- }
expect(newCell.inEditMode).toBe(true);
resolve();
})