Skip to content

Commit 4b7db93

Browse files
dkamburovdkamburov
committed
fix(pivot): Fix navigation in columns when focusing from row to column headers
1 parent 42abb97 commit 4b7db93

File tree

5 files changed

+32
-17
lines changed

5 files changed

+32
-17
lines changed

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-keyboard-nav.spec.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
127127
activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
128128
expect(activeCells.length).toBe(1);
129129
});
130+
130131
it('should allow navigating from first to last column headers', async () => {
131132
const [firstHeader] = fixture.debugElement.queryAll(
132133
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
@@ -148,4 +149,26 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
148149
activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
149150
expect(activeCells.length).toBe(1);
150151
});
152+
153+
fit('should allow navigating in column headers when switching focus from rows to columns', () => {
154+
const [firstCell] = fixture.debugElement.queryAll(
155+
By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_ROW_DIMENSION_CONTENT} ${HEADER_CELL_CSS_CLASS}`));
156+
UIInteractions.simulateClickAndSelectEvent(firstCell);
157+
fixture.detectChanges();
158+
159+
const [firstHeader, secondHeader] = fixture.debugElement.queryAll(
160+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
161+
UIInteractions.simulateClickAndSelectEvent(firstHeader);
162+
fixture.detectChanges();
163+
164+
GridFunctions.verifyHeaderIsFocused(firstHeader.parent);
165+
let activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
166+
expect(activeCells.length).toBe(1);
167+
168+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', firstHeader.nativeElement);
169+
fixture.detectChanges();
170+
GridFunctions.verifyHeaderIsFocused(secondHeader.parent);
171+
activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
172+
expect(activeCells.length).toBe(1);
173+
});
151174
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export class IgxPivotGridNavigationService extends IgxGridNavigationService {
1111
return this.grid.rowDimensions.length - 1;
1212
}
1313

14-
public focusValueCells() {
14+
public focusOutRowHeader() {
1515
this.activeNode.isRowDimensionHeader = false;
1616
}
1717

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,8 @@
106106
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
107107
[ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
108108
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
109-
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
109+
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
110+
(pointerdown)="grid.navigation.focusOutRowHeader($event)">
110111
</igx-grid-header-group>
111112
</ng-container>
112113
</ng-container>
@@ -120,7 +121,8 @@
120121
<igx-grid-header-group [ngClass]="column.headerGroupClasses"
121122
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
122123
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
123-
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL">
124+
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
125+
(pointerdown)="grid.navigation.focusOutRowHeader($event)">
124126
</igx-grid-header-group>
125127
</ng-template>
126128

@@ -131,7 +133,8 @@
131133
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
132134
[style.min-width]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
133135
[style.flex-basis]="column.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
134-
[style.left]="column.rightPinnedOffset">
136+
[style.left]="column.rightPinnedOffset"
137+
(pointerdown)="grid.navigation.focusOutRowHeader($event)">
135138
</igx-grid-header-group>
136139
</ng-container>
137140
</ng-container>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
3030
[cellTemplate]="col.bodyTemplate" [lastSearchInfo]="grid.lastSearchInfo"
3131
[cellSelectionMode]="grid.cellSelection" [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
32-
(pointerdown)="grid.navigation.focusValueCells($event)">
32+
(pointerdown)="grid.navigation.focusOutRowHeader($event)">
3333
</igx-grid-cell>
3434
</ng-template>
3535

@@ -61,7 +61,7 @@
6161
[value]="data | dataMapper:col.field:grid.pipeTrigger:data[col.field]:col.hasNestedPath"
6262
[cellTemplate]="col.bodyTemplate" [lastSearchInfo]="grid.lastSearchInfo"
6363
[cellSelectionMode]="grid.cellSelection" [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
64-
(pointerdown)="grid.navigation.focusValueCells($event)">
64+
(pointerdown)="grid.navigation.focusOutRowHeader($event)">
6565
</igx-grid-cell>
6666
</ng-template>
6767

‎src/app/pivot-grid/pivot-grid.sample.html

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,4 @@
11
<div class="sample-flex-row">
2-
<igx-combo #combo class="combo" [itemsMaxHeight]="250" (selectionChanging)="handleChange($event)"
3-
[data]="dimensions" [displayKey]="'memberName'" [(ngModel)]="selected"
4-
placeholder="Dimension(s)" searchPlaceholder="Search...">
5-
</igx-combo>
6-
<div class="density-chooser">
7-
<igx-buttongroup>
8-
<button igxButton [disabled]="grid1.displayDensity === comfortable" (click)="setDensity('comfortable')">Comfortable</button>
9-
<button igxButton [disabled]="grid1.displayDensity === cosy" (click)="setDensity('cosy')">Cosy</button>
10-
<button igxButton [disabled]="grid1.displayDensity === compact" (click)="setDensity('compact')">Compact</button>
11-
</igx-buttongroup>
12-
</div>
132
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
143
[pivotConfiguration]="pivotConfigHierarchy" [rowSelection]="'single'" [columnSelection]="'single'"
154
(dimensionsChange)='dimensionChange($event)'

0 commit comments

Comments
 (0)