Skip to content

Commit 2012e24

Browse files
damyanpetevdamyanpetev
authored
Merge pull request #8043 from IgniteUI/ddincheva/activeNodeBlur-9.1
Remove active node when the container lose focus -- 9.1.x
2 parents 015df50 + 42273d6 commit 2012e24

File tree

7 files changed

+29
-9
lines changed

7 files changed

+29
-9
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 & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export class IgxFilteringService implements OnDestroy {
5151
private _filterMenuPositionSettings: PositionSettings;
5252
private _filterMenuOverlaySettings: OverlaySettings;
5353
private column;
54+
private lastActiveNode;
5455

5556
public isFilterRowVisible = false;
5657
public filteredColumn: IgxColumnComponent = null;
@@ -98,6 +99,7 @@ export class IgxFilteringService implements OnDestroy {
9899
takeUntil(this.destroy$)).subscribe((eventArgs) => {
99100
const instance = eventArgs.componentRef.instance as any;
100101
if (instance) {
102+
this.lastActiveNode = this.grid.navigation.activeNode;
101103
instance.initialize(this.column, this._overlayService, eventArgs.id);
102104
}
103105
});
@@ -106,6 +108,7 @@ export class IgxFilteringService implements OnDestroy {
106108
filter(overlay => overlay.id === this._componentOverlayId),
107109
takeUntil(this.destroy$)).subscribe(() => {
108110
this._componentOverlayId = null;
111+
this.grid.navigation.activeNode = this.lastActiveNode;
109112
this.grid.theadRow.nativeElement.focus();
110113
});
111114
}

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
} from '@angular/core';
3030
import ResizeObserver from 'resize-observer-polyfill';
3131
import 'igniteui-trial-watermark';
32-
import { Subject, pipe } from 'rxjs';
32+
import { Subject, pipe, fromEvent } from 'rxjs';
3333
import { takeUntil, first, filter, throttleTime, map } from 'rxjs/operators';
3434
import { cloneArray, flatten, mergeObjects, isIE, compareMaps } from '../core/utils';
3535
import { DataType } from '../data-operations/data-util';
@@ -68,7 +68,7 @@ import {
6868
IgxRowEditTextDirective,
6969
IgxRowEditActionsDirective
7070
} from './grid.rowEdit.directive';
71-
import { IgxGridNavigationService } from './grid-navigation.service';
71+
import { IgxGridNavigationService, IActiveNode } from './grid-navigation.service';
7272
import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/displayDensity';
7373
import { IgxGridRowComponent } from './grid/public_api';
7474
import { IgxFilteringService } from './filtering/grid-filtering.service';
@@ -2812,6 +2812,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
28122812
return this._pinnedRecordIDs.length;
28132813
}
28142814

2815+
28152816
constructor(
28162817
public selectionService: IgxGridSelectionService,
28172818
public crudService: IgxGridCRUDService,
@@ -2845,6 +2846,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
28452846

28462847
_setupListeners() {
28472848
const destructor = takeUntil<any>(this.destroy$);
2849+
fromEvent(this.nativeElement, 'focusout').pipe(filter(() => !!this.navigation.activeNode), destructor).subscribe((event) => {
2850+
if (!this.crudService.cell && !!this.navigation.activeNode && (event.target === this.tbody.nativeElement &&
2851+
this.navigation.activeNode.row >= 0 && this.navigation.activeNode.row < this.dataView.length)
2852+
|| (event.target === this.theadRow.nativeElement && this.navigation.activeNode.row === -1)
2853+
|| (event.target === this.tfoot.nativeElement && this.navigation.activeNode.row === this.dataView.length)) {
2854+
this.navigation.activeNode = {} as IActiveNode;
2855+
this.notifyChanges();
2856+
}
2857+
});
28482858
this.onRowAdded.pipe(destructor).subscribe(args => this.refreshGridState(args));
28492859
this.onRowDeleted.pipe(destructor).subscribe(args => {
28502860
this.summaryService.deleteOperation = true;
@@ -2887,6 +2897,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
28872897
if (this._advancedFilteringOverlayId === event.id) {
28882898
const instance = event.componentRef.instance as IgxAdvancedFilteringDialogComponent;
28892899
if (instance) {
2900+
instance.lastActiveNode = this.navigation.activeNode;
28902901
instance.setAddButtonFocus();
28912902
}
28922903
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
@@ -440,7 +440,7 @@ describe('IgxGrid - Headers Keyboard navigation #grid', () => {
440440

441441
const afDialog = fix.nativeElement.querySelector('.igx-advanced-filter');
442442
UIInteractions.triggerKeyDownEvtUponElem('Escape', afDialog);
443-
tick(DEBOUNCETIME);
443+
tick(100);
444444
fix.detectChanges();
445445

446446
// 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
@@ -135,7 +135,7 @@
135135
</div>
136136
<span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
137137
id="right" class="igx-grid__scroll-on-drag-right"></span>
138-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize"
138+
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()"
139139
[style.height.px]='calcHeight'>
140140
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
141141
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
@@ -155,7 +155,7 @@
155155
[style.width.px]="scrollSize"></div>
156156
</div>
157157

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

0 commit comments

Comments
 (0)