DataGrid - Focused cell moves to the end of the table after horizontal scrolling (T1262288) (#28840)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts

@@ -1748,3 +1748,33 @@ test('DataGrid - Gray boxes appear when the push method is used to remove rows i
     };
   });
 });
+
+// T1262288
+test('DataGrid - Focused cell moves to the end of the table after horizontal scrolling', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await t
+    .click(dataGrid.getDataCell(0, 0).element)
+    .pressKey('left');
+
+  await t.expect(dataGrid.getDataCell(0, 0).isFocused).ok();
+
+  await dataGrid.scrollBy({ x: 1000 });
+  await dataGrid.scrollBy({ x: -1000 });
+
+  await t.expect(dataGrid.getDataCell(0, 0).isFocused).ok();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(1, 20).map((item, index) => ({ ...item, id: index })),
+  keyExpr: 'id',
+  columnWidth: 100,
+  showBorders: true,
+  focusedRowEnabled: true,
+  scrolling: {
+    columnRenderingMode: 'virtual',
+    mode: 'virtual',
+    showScrollbar: 'always',
+  },
+  paging: {
+    enabled: false,
+  },
+}));

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

@@ -275,7 +275,7 @@ export class KeyboardNavigationController extends modules.ViewController {
     // @ts-expect-error
     const root = $(domAdapter.getRootNode($rowsView.get && $rowsView.get(0)));
     const $focusedElement = root.find(':focus');
-    const isFocusedElementCorrect = !$focusedElement.length || $focusedElement.closest($rowsView).length;
+    const isFocusedElementCorrect = this._isFocusedElementCorrect($focusedElement, $rowsView, e);
 
     this.unsubscribeFromRowsViewFocusEvent();
     this.subscribeToRowsViewFocusEvent();
@@ -288,8 +288,25 @@ export class KeyboardNavigationController extends modules.ViewController {
       needUpdateFocus = this._isNeedFocus
         ? !isAppend
         : this._isHiddenFocus && isFullUpdate && !e?.virtualColumnsScrolling;
-      needUpdateFocus && this._updateFocus(true);
+      if (needUpdateFocus) {
+        this._updateFocus(true);
+      }
+    }
+  }
+
+  private _isFocusedElementCorrect($focusedElement, $rowsView, e) {
+    if ($focusedElement.length && !$focusedElement.closest($rowsView).length) {
+      return false;
     }
+
+    if (!$focusedElement.length && e?.virtualColumnsScrolling) {
+      const focusedColumnIndex = this._focusedCellPosition?.columnIndex ?? -1;
+      const focusedColumnIndexWithoutOffset = focusedColumnIndex - this._getFocusedColumnIndexOffset(focusedColumnIndex);
+
+      return focusedColumnIndexWithoutOffset >= 0;
+    }
+
+    return true;
   }
 
   private initViewHandlers(): void {