DataGrid: Fix cell focus behavior after grouping nested column using keyboard (#30165)

Co-authored-by: Alyar <>

Author: Alyar666

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/groupColumnReordering.functional.ts

@@ -237,6 +237,50 @@ test('Group last nested column when pressing Ctrl + G', async (t) => {
   });
 });
 
+test('Group last nested column when pressing Ctrl + G when there are several band columns', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const nestedSecondHeader = dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(1);
+
+  await t
+    .click(nestedSecondHeader.element)
+    .pressKey('ctrl+g');
+
+  await t
+    .expect(dataGrid.getGroupPanel().getHeadersCount())
+    .eql(1)
+    .expect(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0).isFocused)
+    .ok();
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [{
+      field1: 'test1',
+      field2: 'test2',
+      field3: 'test3',
+      field4: 'test4',
+      field5: 'test5',
+      field6: 'test6',
+    }],
+    grouping: {
+      contextMenuEnabled: true,
+    },
+    groupPanel: {
+      visible: true,
+    },
+    columns: [
+      'field1',
+      {
+        caption: 'Band Column 1',
+        columns: ['field2', 'field3'],
+      },
+      'field4',
+      {
+        caption: 'Band Column 2',
+        columns: ['field5', 'field6'],
+      },
+    ],
+  });
+});
+
 test('Group single nested column when pressing Ctrl + G', async (t) => {
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
   const nestedLastHeader = dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(0);
@@ -248,7 +292,7 @@ test('Group single nested column when pressing Ctrl + G', async (t) => {
   await t
     .expect(dataGrid.getGroupPanel().getHeadersCount())
     .eql(1)
-    .expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(3).isFocused)
+    .expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(2).isFocused)
     .ok();
 }).before(async () => {
   await createWidget('dxDataGrid', {

packages/devextreme/js/__internal/grids/data_grid/keyboard_navigation/m_headers_keyboard_navigation.ts

@@ -21,10 +21,10 @@ const headersKeyboardNavigation = (
       return column;
     }
 
-    let focusableColumns = this.getFocusableColumns(rowIndex);
+    const focusableColumns = this.getFocusableColumns(rowIndex, column.ownerBand);
 
     if (focusableColumns.length === 1 && isDefined(column.ownerBand)) {
-      focusableColumns = this.getFocusableColumns();
+      return this._columnsController.getParentColumn(column, true);
     }
 
     if (focusableColumns.length === 1) {

packages/devextreme/js/__internal/grids/grid_core/adaptivity/m_adaptivity.ts

@@ -20,7 +20,7 @@ import { isMaterial } from '@js/ui/themes';
 import type { ResizingController } from '@ts/grids/grid_core/views/m_grid_view';
 
 import type { ExportController } from '../../data_grid/export/m_export';
-import type { ColumnsController } from '../columns_controller/m_columns_controller';
+import type { Column, ColumnsController } from '../columns_controller/m_columns_controller';
 import type { ColumnsResizerViewController, DraggingHeaderViewController } from '../columns_resizing_reordering/m_columns_resizing_reordering';
 import type { DataController } from '../data_controller/m_data_controller';
 import type { EditingController } from '../editing/m_editing';
@@ -1326,8 +1326,8 @@ const headersKeyboardNavigation = (Base: ModuleType<HeadersKeyboardNavigationCon
     return indexCorrection;
   }
 
-  protected getFocusableColumns(rowIndex?: number): any[] {
-    return super.getFocusableColumns(rowIndex)
+  protected getFocusableColumns(rowIndex?: number, bandColumnId?: number): Column[] {
+    return super.getFocusableColumns(rowIndex, bandColumnId)
       .filter((col) => col.visibleWidth !== HIDDEN_COLUMNS_WIDTH);
   }
 

packages/devextreme/js/__internal/grids/grid_core/columns_controller/m_columns_controller.ts

@@ -84,6 +84,9 @@ import {
 
 export interface Column extends ColumnBase {
   parseValue: (text: string) => unknown;
+  index?: number;
+  type?: string;
+  visibleWidth?: string | number;
 }
 
 export class ColumnsController extends modules.Controller {
@@ -1834,11 +1837,12 @@ export class ColumnsController extends modules.Controller {
     return result;
   }
 
-  public getParentColumn(column) {
+  public getParentColumn(column: Column, needDirectParent = false): Column {
     const bandColumnsCache = this.getBandColumnsCache();
-    const bandColumns = getParentBandColumns(column.index, bandColumnsCache.columnParentByIndex);
+    const parentColumns = getParentBandColumns(column.index, bandColumnsCache.columnParentByIndex);
+    const parentColumnIndex = needDirectParent ? -1 : 0;
 
-    return bandColumns[0];
+    return parentColumns.at(parentColumnIndex);
   }
 
   public isFirstColumn(

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_headers_keyboard_navigation.ts

@@ -10,6 +10,7 @@ import type { DxEvent } from '@js/events';
 import { getElementLocationInternal } from '@ts/ui/scroll_view/utils/get_element_location_internal';
 
 import type { ColumnHeadersView } from '../column_headers/m_column_headers';
+import type { Column } from '../columns_controller/m_columns_controller';
 import type { ModuleType, Views } from '../m_types';
 import { StickyPosition } from '../sticky_columns/const';
 import { GridCoreStickyColumnsDom } from '../sticky_columns/dom';
@@ -148,13 +149,17 @@ export class HeadersKeyboardNavigationController extends ColumnKeyboardNavigatio
     return '.dx-header-row > td';
   }
 
-  protected getFocusableColumns(rowIndex?: number): any[] {
+  protected getFocusableColumns(rowIndex?: number, bandColumnId?: number): Column[] {
     const visibleColumns = this._columnsController.getVisibleColumns(rowIndex);
+    const isColumnFocusable = (column: Column): boolean => !isDefined(column.type)
+        || this._columnsController.isCustomCommandColumn(column);
+    const result: Column[] = visibleColumns.filter(isColumnFocusable);
 
-    return visibleColumns.filter(
-      (column) => !isDefined(column.type)
-        || this._columnsController.isCustomCommandColumn(column),
-    );
+    if (isDefined(bandColumnId)) {
+      return result.filter((column: Column): boolean => column.ownerBand === bandColumnId);
+    }
+
+    return result;
   }
 
   protected getContainerBoundingRect($container: dxElementWrapper) {