DataGrid: Fix header focus not restoring when multiple grouping applied (T1325775)

Author: Alyar

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

@@ -1340,6 +1340,90 @@ test('Tab key on the focused group row should be handled by default behavior (T8
   });
 });
 
+test('DataGrid - Focus should move back to headers on Shift+Tab when multiple grouping is applied (T1325775)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const headerRow = dataGrid.getHeaders().getHeaderRow(0);
+  const headerCell = headerRow.getHeaderCell(2);
+  const stateGroupRow = dataGrid.getGroupRow(0);
+  const cityGroupRow = dataGrid.getGroupRow(1);
+  const firstDataCell = dataGrid.getDataCell(2, 2);
+
+  await t
+    .expect(dataGrid.isReady())
+    .ok();
+
+  await addFocusableElementBefore('#container');
+
+  await t
+    .click(Selector('#focusable-start'))
+    .pressKey('tab')
+    .expect(headerCell.isFocused)
+    .ok()
+
+    .pressKey('tab')
+    .expect(stateGroupRow.isFocused)
+    .ok()
+
+    .pressKey('tab')
+    .expect(cityGroupRow.isFocused)
+    .ok()
+
+    .pressKey('tab')
+    .expect(firstDataCell.isFocused)
+    .ok()
+
+    .pressKey('shift+tab')
+    .expect(cityGroupRow.isFocused)
+    .ok()
+
+    .pressKey('shift+tab')
+    .expect(stateGroupRow.isFocused)
+    .ok()
+
+    .pressKey('shift+tab')
+    .expect(headerCell.isFocused)
+    .ok();
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    showBorders: true,
+    keyExpr: 'id',
+    dataSource: [
+      {
+        id: 1,
+        state: 'Arkansas',
+        city: 'Bentonville',
+        company: 'Super Mart of the West',
+      },
+      {
+        id: 2,
+        state: 'Arkansas',
+        city: 'Bentonville',
+        company: 'Electronics Depot',
+      },
+      {
+        id: 3,
+        state: 'California',
+        city: 'Cupertino',
+        company: 'Braeburn',
+      },
+    ],
+    grouping: {
+      autoExpandAll: true,
+    },
+    columns: [
+      {
+        dataField: 'state',
+        groupIndex: 0,
+      },
+      {
+        dataField: 'city',
+        groupIndex: 1,
+      },
+      'company',
+    ],
+  });
+});
+
 test('Row should not be focused by "focusedRowIndex" after change "pageIndex" by pager if "autoNavigateToFocused" row is false', async (t) => {
   const dataGrid = new DataGrid('#container');
   await t

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

@@ -802,8 +802,7 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
       return;
     }
 
-    const focusedViewElement = this._focusedView?.element();
-    $(focusedViewElement).addClass(FOCUS_STATE_CLASS);
+    $(this._focusedView?.element()).addClass(FOCUS_STATE_CLASS);
 
     const { isLastValidCell, isOriginalHandlerRequired } = this._getTabBoundaryInfo(event);
 
@@ -1106,6 +1105,7 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
 
     // Handle row transition — fires focusedRowChanging event
     $cell = this._checkNewLineTransition($event, $cell)!;
+
     if (!$cell) {
       return false;
     }
@@ -2058,13 +2058,15 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
   }
 
   protected _isFirstValidCell(cellPosition) {
-    let isFirstValidCell = false;
+    if (cellPosition.rowIndex !== 0) {
+      return false;
+    }
 
-    if (cellPosition.rowIndex === 0 && cellPosition.columnIndex >= 0) {
-      isFirstValidCell = isFirstValidCell || !this._hasValidCellBeforePosition(cellPosition);
+    if (this._isFullRowFocusType(cellPosition.rowIndex) && cellPosition.columnIndex > 0) {
+      return true;
     }
 
-    return isFirstValidCell;
+    return cellPosition.columnIndex >= 0 && !this._hasValidCellBeforePosition(cellPosition);
   }
 
   private _hasValidCellBeforePosition(cellPosition) {
@@ -2099,36 +2101,37 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
   }
 
   protected _isLastValidCell(cellPosition) {
-    const nextColumnIndex = cellPosition.columnIndex >= 0 ? cellPosition.columnIndex + 1 : 0;
     const { rowIndex } = cellPosition;
-    const checkingPosition = {
-      columnIndex: nextColumnIndex,
-      rowIndex,
-    };
-    const visibleRows = this._dataController.getVisibleRows();
-    const row = visibleRows && visibleRows[rowIndex];
-    const isLastRow = this._isLastRow(rowIndex);
 
-    if (!isLastRow) {
+    if (!this._isLastRow(rowIndex)) {
       return false;
     }
 
-    const isFullRowFocus = row?.rowType === 'group' || row?.rowType === 'groupFooter';
-    if (isFullRowFocus && cellPosition.columnIndex > 0) {
+    if (this._isFullRowFocusType(rowIndex) && cellPosition.columnIndex > 0) {
       return true;
     }
 
     if (cellPosition.columnIndex === this._getVisibleColumnCount() - 1) {
       return true;
     }
 
+    const nextColumnIndex = cellPosition.columnIndex >= 0 ? cellPosition.columnIndex + 1 : 0;
+    const checkingPosition = { columnIndex: nextColumnIndex, rowIndex };
+
     if (this._isCellByPositionValid(checkingPosition)) {
       return false;
     }
 
     return this._isLastValidCell(checkingPosition);
   }
 
+  private _isFullRowFocusType(rowIndex: number): boolean {
+    const visibleRows = this._dataController.getVisibleRows();
+    const row = visibleRows && visibleRows[rowIndex];
+
+    return row?.rowType === 'group' || row?.rowType === 'groupFooter';
+  }
+
   // #endregion Cell_Position
   // #region DOM_Manipulation
   /**