Skip to content

Commit b4a8490

Browse files
damyanpetevdamyanpetev
authored
Merge pull request #8037 from IgniteUI/ddincheva/activeNodeBlur
Remove active node when the container lose focus
2 parents b8f99af + e251fb8 commit b4a8490

File tree

7 files changed

+29
-10
lines changed

7 files changed

+29
-10
lines changed

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,11 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
129129
*/
130130
public searchValue: any;
131131

132+
/**
133+
* @hidden @internal
134+
*/
135+
public lastActiveNode;
136+
132137
private _positionSettings = {
133138
horizontalStartPoint: HorizontalAlignment.Right,
134139
verticalStartPoint: VerticalAlignment.Top
@@ -1075,6 +1080,7 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
10751080
if (this._overlayComponentId) {
10761081
this._overlayService.hide(this._overlayComponentId);
10771082
}
1083+
this.grid.navigation.activeNode = this.lastActiveNode;
10781084
if (this.grid.navigation.activeNode && this.grid.navigation.activeNode.row === -1) {
10791085
(this.grid as any).theadRow.nativeElement.focus();
10801086
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@ export class IgxFilteringService implements OnDestroy {
4747
private columnToExpressionsMap = new Map<string, ExpressionUI[]>();
4848
private _datePipe: IgxDatePipeComponent;
4949
private columnStartIndex = -1;
50-
private _filterIconsRegistered = false;
5150
private _componentOverlayId: string;
5251
private _filterMenuPositionSettings: PositionSettings;
5352
private _filterMenuOverlaySettings: OverlaySettings;
5453
private column;
54+
private lastActiveNode;
5555

5656
public isFilterRowVisible = false;
5757
public filteredColumn: IgxColumnComponent = null;
@@ -109,6 +109,7 @@ export class IgxFilteringService implements OnDestroy {
109109
eventArgs.componentRef.instance as IgxGridExcelStyleFilteringComponent;
110110

111111
if (instance) {
112+
this.lastActiveNode = this.grid.navigation.activeNode;
112113
instance.initialize(this.column, this._overlayService, eventArgs.id);
113114
}
114115
});
@@ -124,6 +125,7 @@ export class IgxFilteringService implements OnDestroy {
124125
instance.column = null;
125126
}
126127
this._componentOverlayId = null;
128+
this.grid.navigation.activeNode = this.lastActiveNode;
127129
this.grid.theadRow.nativeElement.focus();
128130
});
129131
}

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
} from '@angular/core';
3232
import ResizeObserver from 'resize-observer-polyfill';
3333
import 'igniteui-trial-watermark';
34-
import { Subject, pipe } from 'rxjs';
34+
import { Subject, pipe, fromEvent } from 'rxjs';
3535
import { takeUntil, first, filter, throttleTime, map } from 'rxjs/operators';
3636
import { cloneArray, flatten, mergeObjects, isIE, compareMaps, resolveNestedPath, isObject } from '../core/utils';
3737
import { DataType } from '../data-operations/data-util';
@@ -72,7 +72,7 @@ import {
7272
IgxRowEditTextDirective,
7373
IgxRowEditActionsDirective
7474
} from './grid.rowEdit.directive';
75-
import { IgxGridNavigationService } from './grid-navigation.service';
75+
import { IgxGridNavigationService, IActiveNode } from './grid-navigation.service';
7676
import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/displayDensity';
7777
import { IgxGridRowComponent } from './grid/public_api';
7878
import { IgxFilteringService } from './filtering/grid-filtering.service';
@@ -2884,6 +2884,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
28842884
return this._pinnedRecordIDs.length;
28852885
}
28862886

2887+
28872888
constructor(
28882889
public selectionService: IgxGridSelectionService,
28892890
public crudService: IgxGridCRUDService,
@@ -2917,6 +2918,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
29172918

29182919
_setupListeners() {
29192920
const destructor = takeUntil<any>(this.destroy$);
2921+
fromEvent(this.nativeElement, 'focusout').pipe(filter(() => !!this.navigation.activeNode), destructor).subscribe((event) => {
2922+
if (!this.crudService.cell && !!this.navigation.activeNode && (event.target === this.tbody.nativeElement &&
2923+
this.navigation.activeNode.row >= 0 && this.navigation.activeNode.row < this.dataView.length)
2924+
|| (event.target === this.theadRow.nativeElement && this.navigation.activeNode.row === -1)
2925+
|| (event.target === this.tfoot.nativeElement && this.navigation.activeNode.row === this.dataView.length)) {
2926+
this.navigation.activeNode = {} as IActiveNode;
2927+
this.notifyChanges();
2928+
}
2929+
});
29202930
this.onRowAdded.pipe(destructor).subscribe(args => this.refreshGridState(args));
29212931
this.onRowDeleted.pipe(destructor).subscribe(args => {
29222932
this.summaryService.deleteOperation = true;
@@ -2972,6 +2982,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
29722982
if (this._advancedFilteringOverlayId === event.id) {
29732983
const instance = event.componentRef.instance as IgxAdvancedFilteringDialogComponent;
29742984
if (instance) {
2985+
instance.lastActiveNode = this.navigation.activeNode;
29752986
instance.setAddButtonFocus();
29762987
}
29772988
return;

‎projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav-headers.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -470,7 +470,7 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => {
470470

471471
const afDialog = fix.nativeElement.querySelector('.igx-advanced-filter');
472472
UIInteractions.triggerKeyDownEvtUponElem('Escape', afDialog);
473-
tick(DEBOUNCETIME);
473+
tick(100);
474474
fix.detectChanges();
475475

476476
// Verify AF dialog is closed.

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@
201201
</div>
202202
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
203203
id="right" class="igx-grid__scroll-on-drag-right"></span>
204-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize">
204+
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
205205
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
206206
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
207207
<ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
@@ -222,7 +222,7 @@
222222
[style.width.px]="scrollSize"></div>
223223
</div>
224224

225-
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden">
225+
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
226226
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
227227
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
228228
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
</div>
161161
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
162162
id="right" class="igx-grid__scroll-on-drag-right"></span>
163-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize">
163+
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
164164
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
165165
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
166166
<ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
@@ -181,7 +181,7 @@
181181
[style.width.px]="scrollSize"></div>
182182
</div>
183183

184-
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden">
184+
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
185185
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
186186
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
187187
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
</div>
135135
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
136136
id="right" class="igx-grid__scroll-on-drag-right"></span>
137-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize"
137+
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()"
138138
[style.height.px]='calcHeight'>
139139
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
140140
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
@@ -154,7 +154,7 @@
154154
[style.width.px]="scrollSize"></div>
155155
</div>
156156

157-
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden">
157+
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
158158
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
159159
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
160160
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

0 commit comments

Comments
 (0)