fix: do not allow focusing of cell when not in cell selection mode

siemens · Dec 17, 2024 · 1a6b5f2 · 1a6b5f2
1 parent b16e6a3
commit 1a6b5f2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts
@@ -19,7 +19,7 @@ import {
 import { columnGroupWidths, columnsByPin, columnsByPinArr } from '../../utils/column';
 import { Keys } from '../../utils/keys';
 import { BehaviorSubject } from 'rxjs';
-import { ActivateEvent, RowOrGroup, TreeStatus } from '../../types/public.types';
+import { ActivateEvent, RowOrGroup, SelectionType, TreeStatus } from '../../types/public.types';
 import { AsyncPipe } from '@angular/common';
 import { TableColumn } from '../../types/table-column.type';
 import { ColumnGroupWidth, PinnedColumns } from '../../types/internal.types';
@@ -38,7 +38,7 @@ import { DataTableBodyCellComponent } from './body-cell.component';
         @for (column of colGroup.columns; track column.$$id; let ii = $index) {
           <datatable-body-cell
             role="cell"
-            tabindex="-1"
+            [attr.tabindex]="selectionType === SelectionType.cell ? '-1' : null"
             [row]="row"
             [group]="group"
             [expanded]="expanded"
@@ -62,6 +62,8 @@ import { DataTableBodyCellComponent } from './body-cell.component';
   imports: [DataTableBodyCellComponent, AsyncPipe]
 })
 export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges {
+  SelectionType = SelectionType;
+
   private cd = inject(ChangeDetectorRef);
 
   @Input() set columns(val: TableColumn[]) {
@@ -92,6 +94,7 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
   @Input() row: TRow;
   @Input() group: TRow[];
   @Input() isSelected: boolean;
+  @Input() selectionType: SelectionType;
   @Input() rowIndex: number;
   @Input() displayCheck: (row: TRow, column: TableColumn, value?: any) => boolean;
   @Input() treeStatus?: TreeStatus = 'collapsed';

diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -85,6 +85,7 @@ import { ProgressBarComponent } from './progress-bar.component';
             <datatable-summary-row
               [rowHeight]="summaryHeight"
               [offsetX]="offsetX"
+              [selectionType]="selectionType"
               [innerWidth]="innerWidth"
               [rows]="rows"
               [columns]="columns"
@@ -131,6 +132,7 @@ import { ProgressBarComponent } from './progress-bar.component';
                     [isSelected]="selector.getRowSelected(group)"
                     [innerWidth]="innerWidth"
                     [offsetX]="offsetX"
+                    [selectionType]="selectionType"
                     [columns]="columns"
                     [rowHeight]="getRowHeight(group)"
                     [row]="group"
@@ -165,6 +167,7 @@ import { ProgressBarComponent } from './progress-bar.component';
                     [isSelected]="selector.getRowSelected(group)"
                     [innerWidth]="innerWidth"
                     [offsetX]="offsetX"
+                    [selectionType]="selectionType"
                     [columns]="columns"
                     [rowHeight]="getRowHeight(group)"
                     [row]="group"
@@ -200,6 +203,7 @@ import { ProgressBarComponent } from './progress-bar.component';
                     [isSelected]="selector.getRowSelected(row)"
                     [innerWidth]="innerWidth"
                     [offsetX]="offsetX"
+                    [selectionType]="selectionType"
                     [columns]="columns"
                     [rowHeight]="getRowHeight(row)"
                     [row]="row"
@@ -229,6 +233,7 @@ import { ProgressBarComponent } from './progress-bar.component';
               [ngStyle]="bottomSummaryRowsStyles()"
               [rowHeight]="summaryHeight"
               [offsetX]="offsetX"
+              [selectionType]="selectionType"
               [innerWidth]="innerWidth"
               [rows]="rows"
               [columns]="columns"

diff --git a/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts b/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnChanges, PipeTransform, TemplateRef } from '@angular/core';
 import { TableColumn, TableColumnProp } from '../../../types/table-column.type';
 import { DataTableBodyRowComponent } from '../body-row.component';
+import { SelectionType } from '../../../types/public.types';
 
 export interface ISummaryColumn {
   summaryFunc?: (cells: any[]) => any;
@@ -35,6 +36,7 @@ function noopSumFunc(cells: any[]): void {
         tabindex="-1"
         [innerWidth]="innerWidth"
         [offsetX]="offsetX"
+        [selectionType]="selectionType"
         [columns]="_internalColumns"
         [rowHeight]="rowHeight"
         [row]="summaryRow"
@@ -55,6 +57,7 @@ export class DataTableSummaryRowComponent implements OnChanges {
 
   @Input() rowHeight: number;
   @Input() offsetX: number;
+  @Input() selectionType: SelectionType;
   @Input() innerWidth: number;
 
   _internalColumns: ISummaryColumn[];