DataGrid - Scrolling position is reset to far right on an attempt to scroll left if the most right cell is focused using the keyboard (T1277214) (#29374)

Author: tongsonbarbs

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

@@ -1749,7 +1749,7 @@ test('DataGrid - Gray boxes appear when the push method is used to remove rows i
   });
 });
 
-// T1262288
+// T1262288 - Left to Right
 test('DataGrid - Focused cell moves to the end of the table after horizontal scrolling', async (t) => {
   const dataGrid = new DataGrid('#container');
 
@@ -1778,3 +1778,33 @@ test('DataGrid - Focused cell moves to the end of the table after horizontal scr
     enabled: false,
   },
 }));
+
+// T1277214 - Right to Left
+test('DataGrid - Scrolling position is reset to far right on an attempt to scroll left if the most right cell is focused using the keyboard', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  await dataGrid.scrollTo(t, { x: 1000 });
+  await t
+    .click(dataGrid.getDataCell(0, 20).element)
+    .pressKey('right');
+
+  await t.expect(dataGrid.getDataCell(0, 20).isFocused).ok();
+
+  await dataGrid.scrollBy({ x: -1000 });
+  await dataGrid.scrollBy({ x: 1000 });
+
+  await t.expect(dataGrid.getDataCell(0, 20).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/data_controller/m_data_controller.ts

@@ -499,6 +499,7 @@ export class DataController extends DataHelperMixin(modules.Controller) {
       that._columnsController.columnsChanged.remove(updateItemsHandler);
       that.updateItems({
         repaintChangesOnly: false,
+        event: change?.changeTypes?.event,
         virtualColumnsScrolling: change?.changeTypes?.virtualColumnsScrolling,
       });
     };

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

@@ -289,7 +289,9 @@ export class KeyboardNavigationController extends modules.ViewController {
         ? !isAppend
         : this._isHiddenFocus && isFullUpdate && !e?.virtualColumnsScrolling;
       if (needUpdateFocus) {
-        this._updateFocus(true);
+        const isScrollEvent = !!e?.event?.type;
+        const skipFocusEvent = e?.virtualColumnsScrolling && isScrollEvent;
+        this._updateFocus(true, skipFocusEvent);
       }
     }
   }
@@ -301,9 +303,7 @@ export class KeyboardNavigationController extends modules.ViewController {
 
     if (!$focusedElement.length && e?.virtualColumnsScrolling) {
       const focusedColumnIndex = this._focusedCellPosition?.columnIndex ?? -1;
-      const focusedColumnIndexWithoutOffset = focusedColumnIndex - this._getFocusedColumnIndexOffset(focusedColumnIndex);
-
-      return focusedColumnIndexWithoutOffset >= 0;
+      return this._isColumnRendered(focusedColumnIndex);
     }
 
     return true;
@@ -1518,7 +1518,7 @@ export class KeyboardNavigationController extends modules.ViewController {
     }
   }
 
-  public _updateFocus(isRenderView?) {
+  public _updateFocus(isRenderView?, skipFocusEvent = false) {
     this._updateFocusTimeout = setTimeout(() => {
       if (this._needFocusEditingCell()) {
         this._editingController._focusEditingCell();
@@ -1557,12 +1557,12 @@ export class KeyboardNavigationController extends modules.ViewController {
                 );
                 return;
               }
-              !isFocusedElementDefined && this._focus($cell);
+              !isFocusedElementDefined && this._focus($cell, false, skipFocusEvent);
             } else if (
               !isFocusedElementDefined
               && (this._isNeedFocus || this._isHiddenFocus)
             ) {
-              this._focus($cell, this._isHiddenFocus);
+              this._focus($cell, this._isHiddenFocus, skipFocusEvent);
             }
             if (isEditing && !column?.showEditorAlways) {
               this._focusInteractiveElement.bind(this)($cell);
@@ -1958,7 +1958,6 @@ export class KeyboardNavigationController extends modules.ViewController {
       const isShowWhenGrouped = column && column.showWhenGrouped;
       const isDataCell = column && !$cell.hasClass(COMMAND_EXPAND_CLASS) && isDataRow($row);
       const isValidGroupSpaceColumn = function () {
-        // eslint-disable-next-line radix
         return (
           (!isMasterDetailRow
             && column

packages/devextreme/js/__internal/grids/grid_core/virtual_columns/m_virtual_columns.ts

@@ -51,7 +51,7 @@ const rowsView = (Base: ModuleType<RowsView>) => class VirtualColumnsRowsViewExt
     }
 
     // @ts-expect-error
-    that._columnsController.setScrollPosition(left);
+    that._columnsController.setScrollPosition(left, e.event);
   }
 
   protected _renderCore(e) {
@@ -179,11 +179,13 @@ const columns = (Base: ModuleType<ColumnsController>) => class VirtualColumnsCon
     return this.option('scrolling.columnPageSize');
   }
 
-  private _fireColumnsChanged() {
+  private _fireColumnsChanged(event?) {
     const date: any = new Date();
     this.columnsChanged.fire({
       optionNames: { all: true, length: 1 },
-      changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2 },
+      changeTypes: {
+        columns: true, virtualColumnsScrolling: true, length: 2, event,
+      },
     });
     this._renderTime = (new Date()) as any - date;
   }
@@ -200,17 +202,17 @@ const columns = (Base: ModuleType<ColumnsController>) => class VirtualColumnsCon
     return scrollingTimeout;
   }
 
-  private setScrollPosition(position) {
+  private setScrollPosition(position, event?) {
     const scrollingTimeout = this.getScrollingTimeout();
 
     if (scrollingTimeout > 0) {
       clearTimeout(this._changedTimeout);
 
       this._changedTimeout = setTimeout(() => {
-        this._setScrollPositionCore(position);
+        this._setScrollPositionCore(position, event);
       }, scrollingTimeout);
     } else {
-      this._setScrollPositionCore(position);
+      this._setScrollPositionCore(position, event);
     }
   }
 
@@ -222,7 +224,7 @@ const columns = (Base: ModuleType<ColumnsController>) => class VirtualColumnsCon
     this._setScrollPositionCore(this._position);
   }
 
-  private _setScrollPositionCore(position) {
+  private _setScrollPositionCore(position, event?) {
     const that = this;
 
     if (that.isVirtualMode()) {
@@ -234,7 +236,7 @@ const columns = (Base: ModuleType<ColumnsController>) => class VirtualColumnsCon
       if (needColumnsChanged) {
         that._beginPageIndex = beginPageIndex;
         that._endPageIndex = endPageIndex;
-        that._fireColumnsChanged();
+        that._fireColumnsChanged(event);
       }
     }
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/virtualColumns.tests.js

@@ -385,7 +385,7 @@ QUnit.module('Scrolling', { beforeEach: setupModule, afterEach: teardownModule }
         this.columnsController.columnsChanged.add(e => {
             assert.deepEqual(e, {
                 optionNames: { all: true, length: 1 },
-                changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2 }
+                changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2, event: undefined }
             }, 'columnsChanged args');
             columnsChangedPositions.push(pos);
         });
@@ -413,7 +413,7 @@ QUnit.module('Scrolling', { beforeEach: setupModule, afterEach: teardownModule }
         this.columnsController.columnsChanged.add(e => {
             assert.deepEqual(e, {
                 optionNames: { all: true, length: 1 },
-                changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2 }
+                changeTypes: { columns: true, virtualColumnsScrolling: true, length: 2, event: undefined }
             }, 'columnsChanged args');
             columnsChangedPositions.push(pos);
         });