Skip to content

Commit 2da7c99

Browse files
ddinchevaddincheva
authored
Interactive elements that are not cells or rows, should not trigger activation - master (#7604)
* fix(IgxRow): when click over row indicators should not activate cell #7311 * fix(IgxGrid): click over header indicators should not trigger activation #7311 * fix(IgxGrid): non primary click should not clears the cell selection #7529 * fix(IgxCell): activate cell on left click without selection #7529
1 parent b487a82 commit 2da7c99

File tree

8 files changed

+25
-20
lines changed

8 files changed

+25
-20
lines changed

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -760,6 +760,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
760760
return;
761761
}
762762
if (!isLeftClick(event)) {
763+
event.preventDefault();
764+
this.setActiveNode();
763765
this.selectionService.addKeyboardRange();
764766
this.selectionService.initKeyboardState();
765767
this.selectionService.primaryButton = false;
@@ -844,14 +846,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
844846
*/
845847
public activate(event: FocusEvent | KeyboardEvent) {
846848
const node = this.selectionNode;
847-
848-
if (this.grid.navigation.activeNode) {
849-
Object.assign(this.grid.navigation.activeNode, {row: this.rowIndex, column: this.visibleColumnIndex});
850-
} else {
851-
const layout = this.column.columnLayoutChild ? this.grid.navigation.layout(this.visibleColumnIndex) : null;
852-
this.grid.navigation.activeNode = { row: this.rowIndex, column: this.visibleColumnIndex, layout: layout };
853-
}
854-
849+
this.setActiveNode();
855850
const shouldEmitSelection = !this.selectionService.isActiveNode(node);
856851

857852
if (this.selectionService.primaryButton) {
@@ -916,4 +911,13 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
916911
meta.set('pinned', this.grid.isRecordPinnedByViewIndex(this.row.index));
917912
return meta;
918913
}
914+
915+
private setActiveNode() {
916+
if (this.grid.navigation.activeNode) {
917+
Object.assign(this.grid.navigation.activeNode, {row: this.rowIndex, column: this.visibleColumnIndex});
918+
} else {
919+
const layout = this.column.columnLayoutChild ? this.grid.navigation.layout(this.visibleColumnIndex) : null;
920+
this.grid.navigation.activeNode = { row: this.rowIndex, column: this.visibleColumnIndex, layout: layout };
921+
}
922+
}
919923
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<ng-container *ngIf="grid.groupingExpressions.length > 0">
2-
<div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}"></div>
2+
<div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}" (pointerdown)="$event.preventDefault()" (click)="$event.stopPropagation()"></div>
33
</ng-container>
44
<ng-container *ngIf="rowDraggable">
55
<div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()">
66
<ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
77
</div>
88
</ng-container>
99
<ng-container *ngIf="this.showRowSelectors">
10-
<div class="igx-grid__cbx-selection" (click)="onRowSelectorClick($event)">
10+
<div class="igx-grid__cbx-selection" (pointerdown)="$event.preventDefault()" (click)="onRowSelectorClick($event)">
1111
<ng-template *ngTemplateOutlet="
1212
this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
1313
context: { $implicit: { index: viewIndex, rowID: rowID, selected: selected }}">

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,15 @@
4141
<div class="igx-grid__header-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"
4242
[ngClass]="{
4343
'igx-grid__header-indentation--no-border': isRowSelectable || rowDraggable
44-
}" #headerGroupContainer (click)="toggleAllGroupRows()">
44+
}" #headerGroupContainer (click)="toggleAllGroupRows()" (pointerdown)="$event.preventDefault()">
4545

4646
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }"></ng-container>
4747
</div>
4848
</ng-container>
4949
<ng-container *ngIf="rowDraggable">
5050
<div class="igx-grid__drag-indicator" [ngClass]="{
5151
'igx-grid__drag-indicator--header': !isRowSelectable
52-
}" #headerDragContainer>
52+
}" (pointerdown)="$event.preventDefault()" #headerDragContainer>
5353
<div style="visibility: hidden;">
5454
<ng-container
5555
*ngTemplateOutlet="this.dragIndicatorIconTemplate ? this.dragIndicatorIconTemplate : dragIndicatorIconBase">
@@ -60,7 +60,7 @@
6060
<ng-container *ngIf="showRowSelectors">
6161
<div class="igx-grid__cbx-selection" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
6262
'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible
63-
}">
63+
}" (pointerdown)="$event.preventDefault()">
6464
<ng-template #headSelector
6565
*ngTemplateOutlet="
6666
this.headSelectorTemplate ? this.headSelectorTemplate : headSelectorBaseTemplate;

‎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
@@ -22,7 +22,7 @@
2222
<ng-container *ngIf="rowDraggable">
2323
<div class="igx-grid__drag-indicator" [ngClass]="{
2424
'igx-grid__drag-indicator--header': !isRowSelectable
25-
}" #headerDragContainer>
25+
}" (pointerdown)='$event.preventDefault()' #headerDragContainer>
2626
<div style="visibility: hidden;">
2727
<ng-container
2828
*ngTemplateOutlet="this.dragIndicatorIconTemplate ? this.dragIndicatorIconTemplate : this.dragIndicatorIconBase">
@@ -33,7 +33,7 @@
3333
<ng-container *ngIf="showRowSelectors">
3434
<div class="igx-grid__cbx-selection" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
3535
'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible
36-
}">
36+
}" (pointerdown)='$event.preventDefault()'>
3737
<ng-template #headSelector
3838
*ngTemplateOutlet="
3939
this.headSelectorTemplate ? this.headSelectorTemplate : headSelectorBaseTemplate;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
</ng-template>
1616

1717
<ng-container *ngIf="rowDraggable">
18-
<div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()">
18+
<div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()" (pointerdown)="$event.preventDefault()">
1919
<ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
2020
</div>
2121
</ng-container>
2222
<ng-container *ngIf="showRowSelectors">
23-
<div class="igx-grid__cbx-selection" (click)="onRowSelectorClick($event)">
23+
<div class="igx-grid__cbx-selection" (click)="onRowSelectorClick($event)" (pointerdown)="$event.preventDefault()">
2424
<ng-template *ngTemplateOutlet="
2525
this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
2626
context: { $implicit: {

‎projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
class="igx-grid__summaries-patch"
55
[style.min-width.px]="grid.summariesMargin"
66
[style.flex-basis.px]="grid.summariesMargin"
7+
(pointerdown)="$event.preventDefault()"
78
></div>
89
</ng-container>
910
<ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</div>
55
</ng-container>
66
<ng-container *ngIf="showRowSelectors">
7-
<div class="igx-grid__cbx-selection" (click)="onRowSelectorClick($event)">
7+
<div class="igx-grid__cbx-selection" (click)="onRowSelectorClick($event)" (pointerdown)="$event.preventDefault()">
88
<ng-template *ngTemplateOutlet="
99
this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
1010
context: { $implicit: { index: viewIndex, rowID: rowID, selected: selected }}">

‎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
@@ -12,7 +12,7 @@
1212
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
1313
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
1414
<ng-container *ngIf="rowDraggable">
15-
<div class="igx-grid__drag-indicator" #headerDragContainer>
15+
<div class="igx-grid__drag-indicator" (pointerdown)="$event.preventDefault()" #headerDragContainer>
1616
<div style="visibility: hidden;">
1717
<ng-container
1818
*ngTemplateOutlet="this.dragIndicatorIconTemplate ? this.dragIndicatorIconTemplate : this.dragIndicatorIconBase">
@@ -22,7 +22,7 @@
2222
</ng-container>
2323
<ng-container *ngIf="showRowSelectors">
2424
<div class="igx-grid__cbx-selection" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
25-
'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible }">
25+
'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible }" (pointerdown)="$event.preventDefault()">
2626
<ng-template #headSelector
2727
*ngTemplateOutlet="
2828
this.headSelectorTemplate ? this.headSelectorTemplate : headSelectorBaseTemplate;

0 commit comments

Comments
 (0)