Skip to content

Commit 10350d3

Browse files
ddinchevaddincheva
committed
feat(IgxGrid): remove activeNode when container is not focused #7337 
1 parent c1365bb commit 10350d3

File tree

4 files changed

+22
-8
lines changed

4 files changed

+22
-8
lines changed

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ import {
2525
InjectionToken,
2626
Optional,
2727
DoCheck,
28-
Directive
28+
Directive,
29+
OnChanges,
30+
SimpleChanges,
31+
HostListener
2932
} from '@angular/core';
3033
import ResizeObserver from 'resize-observer-polyfill';
3134
import 'igniteui-trial-watermark';
@@ -68,7 +71,7 @@ import {
6871
IgxRowEditTextDirective,
6972
IgxRowEditActionsDirective
7073
} from './grid.rowEdit.directive';
71-
import { IgxGridNavigationService } from './grid-navigation.service';
74+
import { IgxGridNavigationService, IActiveNode } from './grid-navigation.service';
7275
import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/displayDensity';
7376
import { IgxGridRowComponent } from './grid/public_api';
7477
import { IgxFilteringService } from './filtering/grid-filtering.service';
@@ -1999,6 +2002,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
19992002
@HostBinding('attr.role')
20002003
public hostRole = 'grid';
20012004

2005+
@HostListener('focusout', ['$event'])
2006+
public blur(event) {
2007+
if ((event.target === this.tbody.nativeElement &&
2008+
this.navigation.activeNode.row >= 0 && this.navigation.activeNode.row < this.dataView.length)
2009+
|| (event.target === this.theadRow.nativeElement && this.navigation.activeNode.row === -1)
2010+
|| (event.target === this.tfoot.nativeElement && this.navigation.activeNode.row === this.dataView.length)) {
2011+
this.navigation.activeNode = {} as IActiveNode;
2012+
}
2013+
}
2014+
20022015
/**
20032016
* @hidden @internal
20042017
*/
@@ -2887,6 +2900,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
28872900
if (this._advancedFilteringOverlayId === event.id) {
28882901
const instance = event.componentRef.instance as IgxAdvancedFilteringDialogComponent;
28892902
if (instance) {
2903+
instance.lastActiveNode = this.navigation.activeNode;
28902904
instance.setAddButtonFocus();
28912905
}
28922906
return;

‎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)