Skip to content

Commit afa586d

Browse files
zdrawkuzdrawku
authored
Merge pull request #7144 from IgniteUI/headerNavigation
Grid Keyboard Header Navigation
2 parents 53a4f7b + 601aca8 commit afa586d

30 files changed

+1673
-345
lines changed

‎projects/igniteui-angular/src/lib/checkbox/checkbox.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<div class="igx-checkbox__ripple"></div>
3535
</div>
3636

37-
<span #placeholderLabel role="label"
37+
<span #placeholderLabel
3838
[class]="labelClass"
3939
[id]="labelId"
4040
(click)="_onLabelClick($event)">

‎projects/igniteui-angular/src/lib/core/utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,7 @@ export const NAVIGATION_KEYS = new Set([
335335
export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
336336
export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
337337
export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
338+
export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l']);
338339

339340
/**
340341
* @hidden

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -966,7 +966,7 @@ export class IgxColumnComponent implements AfterContentInit {
966966
let vIndex = -1;
967967

968968
if (this.columnGroup) {
969-
col = this.allChildren.filter(c => !c.columnGroup)[0] as any;
969+
col = this.allChildren.filter(c => !c.columnGroup && !c.hidden)[0] as any;
970970
}
971971
if (this.columnLayoutChild) {
972972
return this.parent.childrenVisibleIndexes.find(x => x.column === this).index;

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.html‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
<ng-template #emptyFilter>
2-
<igx-chips-area [attr.draggable]="false" class="igx-filtering-chips">
3-
<igx-chip #ghostChip [attr.draggable]="false" (click)="onChipClicked()" (keydown.enter)="onChipKeyDown($event)" [displayDensity]="'cosy'">
4-
<igx-icon [attr.draggable]="false" igxPrefix>filter_list</igx-icon>
5-
<span [attr.draggable]="false">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>
6-
</igx-chip>
7-
</igx-chips-area>
2+
<igx-chips-area [attr.draggable]="false" class="igx-filtering-chips">
3+
<igx-chip #ghostChip [attr.draggable]="false" (click)="onChipClicked()" [displayDensity]="'cosy'">
4+
<igx-icon [attr.draggable]="false" igxPrefix>filter_list</igx-icon>
5+
<span [attr.draggable]="false">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>
6+
</igx-chip>
7+
</igx-chips-area>
88
</ng-template>
99

1010
<ng-template #defaultFilter>
1111
<igx-chips-area #chipsArea class="igx-filtering-chips">
1212
<ng-container *ngFor="let item of expressionsList; let last = last; let index = index;" >
13-
<igx-chip
14-
*ngIf="isChipVisible(index)"
13+
<igx-chip *ngIf="isChipVisible(index)"
1514
[removable]="true"
1615
[displayDensity]="'cosy'"
1716
(click)="onChipClicked(item.expression)"
18-
(keydown.enter)="onChipKeyDown($event, item.expression)"
1917
(onRemove)="onChipRemoved($event, item)">
2018
<igx-icon igxPrefix
2119
fontSet="filtering-icons"
@@ -27,7 +25,7 @@
2725
</igx-chip>
2826
<span class="igx-filtering-chips__connector" *ngIf="!last && isChipVisible(index + 1)">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
2927
</ng-container>
30-
<div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()" (keydown.enter)="onChipKeyDown($event)" tabindex="0">
28+
<div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()">
3129
<igx-icon>filter_list</igx-icon>
3230
<igx-badge [value]="moreFiltersCount"></igx-badge>
3331
</div>

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts‎

Lines changed: 2 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import { IgxFilteringService, ExpressionUI } from '../grid-filtering.service';
2828
export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck {
2929

3030
private baseClass = 'igx-grid__filtering-cell-indicator';
31-
private currentTemplate = null;
3231

3332
public expressionsList: ExpressionUI[];
3433
public moreFiltersCount = 0;
@@ -101,27 +100,18 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
101100

102101
get template(): TemplateRef<any> {
103102
if (!this.column.filterable) {
104-
this.currentTemplate = null;
105103
return null;
106104
}
107-
108105
if (this.column.filterCellTemplate) {
109-
this.currentTemplate = this.column.filterCellTemplate;
110106
return this.column.filterCellTemplate;
111107
}
112-
113108
const expressionTree = this.column.filteringExpressionsTree;
114109
if (!expressionTree || expressionTree.filteringOperands.length === 0) {
115-
this.currentTemplate = this.emptyFilter;
116110
return this.emptyFilter;
117111
}
118-
119112
if (this.filteringService.isFilterComplex(this.column.field)) {
120-
this.currentTemplate = this.complexFilter;
121113
return this.complexFilter;
122114
}
123-
124-
this.currentTemplate = this.defaultFilter;
125115
return this.defaultFilter;
126116
}
127117

@@ -130,9 +120,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
130120
* @memberof IgxGridFilteringCellComponent
131121
*/
132122
get context() {
133-
return {
134-
column: this.column
135-
};
123+
return { column: this.column };
136124
}
137125

138126
/**
@@ -161,7 +149,7 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
161149
public onChipRemoved(eventArgs: IBaseChipEventArgs, item: ExpressionUI): void {
162150
const indexToRemove = this.expressionsList.indexOf(item);
163151
this.removeExpression(indexToRemove);
164-
this.focusChip();
152+
this.filteringService.grid.theadRow.nativeElement.focus();
165153
}
166154

167155
/**
@@ -172,14 +160,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
172160
this.cdr.detectChanges();
173161
}
174162

175-
/**
176-
* Chip keydown event handler.
177-
*/
178-
public onChipKeyDown(eventArgs: KeyboardEvent, expression?: IFilteringExpression) {
179-
eventArgs.preventDefault();
180-
this.onChipClicked(expression);
181-
}
182-
183163
/**
184164
* Returns the filtering indicator class.
185165
*/
@@ -190,23 +170,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
190170
};
191171
}
192172

193-
/**
194-
* Focus a chip depending on the current visible template.
195-
*/
196-
public focusChip(focusFirst: boolean = false) {
197-
if (this.currentTemplate === this.defaultFilter) {
198-
if (focusFirst) {
199-
this.focusFirstElement();
200-
} else {
201-
this.focusElement();
202-
}
203-
} else if (this.currentTemplate === this.emptyFilter) {
204-
this.ghostChip.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
205-
} else if (this.currentTemplate === this.complexFilter) {
206-
this.complexChip.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
207-
}
208-
}
209-
210173
private removeExpression(indexToRemove: number) {
211174
if (indexToRemove === 0 && this.expressionsList.length === 1) {
212175
this.clearFiltering();
@@ -266,27 +229,4 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
266229
this.cdr.detectChanges();
267230
}
268231
}
269-
private focusFirstElement(): void {
270-
if (this.chipsArea.chipsList.length > 0) {
271-
this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
272-
} else {
273-
this.moreIcon.nativeElement.focus();
274-
}
275-
}
276-
277-
private focusElement(): void {
278-
if (this.filteringService.shouldFocusNext) {
279-
if (!this.isMoreIconHidden() && this.chipsArea.chipsList.length === 0) {
280-
this.moreIcon.nativeElement.focus();
281-
} else {
282-
this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`).focus();
283-
}
284-
} else {
285-
if (!this.isMoreIconHidden()) {
286-
this.moreIcon.nativeElement.focus();
287-
} else {
288-
this.chipsArea.chipsList.last.elementRef.nativeElement.querySelector(`.igx-chip__remove`).focus();
289-
}
290-
}
291-
}
292232
}

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!-- Have to apply styles inline because of the overlay outlet ... -->
22
<igx-drop-down #inputGroupConditions [height]="'200px'" (onSelection)="onConditionsChanged($event)">
3-
<igx-drop-down-item
4-
*ngFor="let condition of conditions"
3+
<igx-drop-down-item *ngFor="let condition of conditions"
54
[value]="condition"
65
[selected]="isConditionSelected(condition)">
76
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import {
99
QueryList,
1010
ElementRef,
1111
HostBinding,
12-
HostListener,
1312
ChangeDetectionStrategy,
14-
ViewRef
13+
ViewRef,
14+
HostListener
1515
} from '@angular/core';
1616
import { DataType, DataUtil } from '../../../data-operations/data-util';
1717
import { IgxColumnComponent } from '../../columns/column.component';
@@ -105,7 +105,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
105105
this.addExpression(true);
106106
}
107107
}
108-
109108
this.filter();
110109
}
111110

@@ -159,6 +158,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
159158
this.input.nativeElement.focus();
160159
}
161160

161+
@HostListener('keydown.esc', ['$event'])
162+
public onEscHandler(evt) {
163+
evt.preventDefault();
164+
evt.stopPropagation();
165+
this.close();
166+
}
167+
162168
get disabled(): boolean {
163169
return !(this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0);
164170
}
@@ -167,7 +173,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
167173
if (this.column.dataType === DataType.Date) {
168174
return this.defaultDateUI;
169175
}
170-
171176
return this.defaultFilterUI;
172177
}
173178

@@ -212,10 +217,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
212217
if ((event.key === KEYS.ENTER || event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE) && this.dropDownConditions.collapsed) {
213218
this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement);
214219
event.stopImmediatePropagation();
215-
} else if (event.key === KEYS.TAB) {
216-
if (!this.dropDownConditions.collapsed) {
217-
this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement);
218-
}
220+
} else if (event.key === KEYS.TAB && !this.dropDownConditions.collapsed) {
221+
this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement);
219222
}
220223
}
221224

@@ -224,16 +227,14 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
224227
*/
225228
public onInputKeyDown(event: KeyboardEvent) {
226229
this.isKeyPressed = true;
227-
230+
event.stopPropagation();
228231
if (this.column.dataType === DataType.Boolean) {
229232
if (event.key === KEYS.ENTER || event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE) {
230233
this.inputGroupPrefix.nativeElement.focus();
231234
this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement);
232-
event.stopPropagation();
233235
return;
234236
}
235237
}
236-
237238
if (event.key === KEYS.ENTER) {
238239
if (this.isComposing) {
239240
return;
@@ -243,10 +244,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
243244
this.inputGroupPrefix.nativeElement.focus();
244245
this.toggleConditionsDropDown(this.inputGroupPrefix.nativeElement);
245246
} else if (event.key === KEYS.ESCAPE || event.key === KEYS.ESCAPE_IE) {
246-
event.preventDefault();
247247
this.close();
248248
}
249-
event.stopPropagation();
250249
}
251250

252251
/**
@@ -456,12 +455,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
456455
}
457456

458457
this.filteringService.isFilterRowVisible = false;
459-
460458
this.filteringService.updateFilteringCell(this.column);
461-
this.filteringService.focusFilterCellChip(this.column, true);
462-
463459
this.filteringService.filteredColumn = null;
464460
this.filteringService.selectedExpression = null;
461+
this.filteringService.grid.theadRow.nativeElement.focus();
465462

466463
this.chipAreaScrollOffset = 0;
467464
this.transform(this.chipAreaScrollOffset);

0 commit comments

Comments
 (0)