DataGrid - Tab key should activate editor with virtual scrolling enabled (T1290811) (DevExpress#30668)

Author: Tucchhaa

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

@@ -1,4 +1,5 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { ClientFunction } from 'testcafe';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 
@@ -36,6 +37,86 @@ test('Editing should start by pressing enter after scrolling content with scroll
   });
 });
 
+test('editing.allowUpdating callback should receive correct row on tab key on first cell with virtual scrolling (T1290811)', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await dataGrid.scrollBy({ y: 10000 });
+
+  await t
+    .click(dataGrid.getDataCell(49, 0).element)
+    .expect(dataGrid.getDataCell(49, 0).getEditor().element.focused).ok();
+
+  await t
+    .pressKey('tab')
+    .expect(dataGrid.getDataCell(49, 1).getEditor().element.focused).ok();
+
+  const eventRowKeys = await ClientFunction(() => (window as any).eventRowKeys)();
+  const uniqueRowKeys = [...new Set(eventRowKeys)];
+
+  await t.expect(uniqueRowKeys).eql([49]);
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [...new Array(50)].map((_, i) => ({
+      id: i,
+      data: `Row ${i}`,
+    })),
+    keyExpr: 'id',
+    columns: ['id', 'data'],
+    editing: {
+      mode: 'cell',
+      allowUpdating: (e) => {
+        (window as any).eventRowKeys ??= [];
+        (window as any).eventRowKeys.push(e.row?.key);
+        return true;
+      },
+    },
+    scrolling: {
+      mode: 'virtual',
+    },
+    height: 300,
+  });
+});
+
+test('editing.allowUpdating callback should receive correct row on tab key on last cell with virtual scrolling (T1290811)', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await dataGrid.scrollBy({ y: 10000 });
+
+  await t
+    .click(dataGrid.getDataCell(48, 1).element)
+    .expect(dataGrid.getDataCell(48, 1).getEditor().element.focused).ok();
+
+  await t
+    .pressKey('tab')
+    .expect(dataGrid.getDataCell(49, 0).getEditor().element.focused).ok();
+
+  const eventRowKeys = await ClientFunction(() => (window as any).eventRowKeys)();
+  const uniqueRowKeys = [...new Set(eventRowKeys)];
+
+  await t.expect(uniqueRowKeys).eql([48, 49]);
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [...new Array(50)].map((_, i) => ({
+      id: i,
+      data: `Row ${i}`,
+    })),
+    keyExpr: 'id',
+    columns: ['id', 'data'],
+    editing: {
+      mode: 'cell',
+      allowUpdating: (e) => {
+        (window as any).eventRowKeys ??= [];
+        (window as any).eventRowKeys.push(e.row?.key);
+        return true;
+      },
+    },
+    scrolling: {
+      mode: 'virtual',
+    },
+    height: 300,
+  });
+});
+
 test('DataGrid should not remove the minus symbol when editing started (T1201166)', async (t) => {
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
 

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

@@ -959,49 +959,52 @@ export class KeyboardNavigationController extends modules.ViewController {
 
   private _editingCellTabHandler(eventArgs, direction) {
     const eventTarget = eventArgs.originalEvent.target;
-    let $cell = this._getCellElementFromTarget(eventTarget);
-    let isEditingAllowed;
-    const $event = eventArgs.originalEvent;
-    const elementType = this._getElementType(eventTarget);
+    const $targetCell = this._getCellElementFromTarget(eventTarget);
+    const isCommandCell = $targetCell.is(COMMAND_CELL_SELECTOR);
 
-    if ($cell.is(COMMAND_CELL_SELECTOR)) {
+    if (isCommandCell) {
       return !this._targetCellTabHandler(eventArgs, direction);
     }
 
-    this._updateFocusedCellPosition($cell);
+    this._updateFocusedCellPosition($targetCell);
+
+    const elementType = this._getElementType(eventTarget);
     const nextCellInfo = this._getNextCellByTabKey(
-      $event,
+      eventArgs.originalEvent,
       direction,
       elementType,
     );
-    $cell = nextCellInfo.$cell;
+    const $nextCell = nextCellInfo.$cell;
 
-    if (!$cell || this._handleTabKeyOnMasterDetailCell($cell, direction)) {
+    if (!$nextCell || this._handleTabKeyOnMasterDetailCell($nextCell, direction)) {
       return false;
     }
 
-    const column = this._getColumnByCellElement($cell);
-    const $row = $cell.parent();
-    const rowIndex = this._getRowIndex($row);
-    const row = this._dataController.items()[rowIndex] as any;
-    const editingController = this._editingController;
+    let isEditingAllowed = false;
+    const column = this._getColumnByCellElement($nextCell);
 
-    if (column && column.allowEditing) {
+    if (column?.allowEditing) {
+      const $row = $nextCell.parent();
+      const rowIndex = this._getLocalRowIndex($row);
+      const row = this._dataController.items()[rowIndex] as any;
       const isDataRow = !row || row.rowType === 'data';
-      isEditingAllowed = editingController.allowUpdating({ row })
-        ? isDataRow
-        : row && row.isNewRow;
+
+      isEditingAllowed = this._editingController.allowUpdating({ row })
+        ? isDataRow : row?.isNewRow;
     }
 
     if (!isEditingAllowed) {
       this._closeEditCell();
     }
 
-    if (this._focusCell($cell, !nextCellInfo.isHighlighted)) {
-      if (!this._isRowEditMode() && isEditingAllowed) {
+    const nextCellFocused = this._focusCell($nextCell, !nextCellInfo.isHighlighted);
+
+    if (nextCellFocused) {
+      const isRowMode = this._isRowEditMode();
+      if (!isRowMode && isEditingAllowed) {
         this._editFocusedCell();
       } else {
-        this._focusInteractiveElement($cell, eventArgs.shift);
+        this._focusInteractiveElement($nextCell, eventArgs.shift);
       }
     }
 
@@ -2345,11 +2348,14 @@ export class KeyboardNavigationController extends modules.ViewController {
     columnIndex: number,
   ): void {
     const $cell = this._getFocusedCell();
-    const rowIndex = this._getRowIndex($cell?.parent());
+    const $row = $cell?.parent();
+
+    const rowIndex = this.getRowIndex();
     const localRowIndex = Math.min(
-      rowIndex - this._dataController.getRowIndexOffset(),
+      this._getLocalRowIndex($row),
       this._dataController.items().length - 1,
     );
+
     const isEditingCell = this._editingController.isEditCell(
       localRowIndex,
       columnIndex,
@@ -2491,8 +2497,8 @@ export class KeyboardNavigationController extends modules.ViewController {
     }
   }
 
-  private _getRowIndex($row) {
-    let rowIndex = this._rowsView.getRowIndex($row);
+  private _getRowIndex($row): number {
+    let rowIndex = this._getLocalRowIndex($row);
 
     if (rowIndex >= 0) {
       rowIndex += this._dataController.getRowIndexOffset();
@@ -2501,6 +2507,12 @@ export class KeyboardNavigationController extends modules.ViewController {
     return rowIndex;
   }
 
+  protected _getLocalRowIndex($row): number {
+    const rowIndex = this._rowsView.getRowIndex($row);
+
+    return rowIndex;
+  }
+
   private _hasSkipRow($row) {
     const row = $row && $row.get(0);
     return row && row.style.display === 'none';