DataGrid - Opening an editor with the Enter key is inconsistent when …

…scrolling is enabled (T1190668) (#25719)
DevExpress · Oct 4, 2023 · 35f15e9 · 35f15e9
1 parent cf73011
commit 35f15e9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
@@ -2689,8 +2689,10 @@ export const keyboardNavigationModule: import('../m_types').Module = {
         getFocusedCellInRow(rowIndex) {
           const keyboardNavigationController = this.getController('keyboardNavigation');
           let $cell = this.callBase(rowIndex);
+          const rowIndexOffset = this._dataController.getRowIndexOffset();
+          const focusedRowIndex = keyboardNavigationController._focusedCellPosition.rowIndex - rowIndexOffset;
 
-          if (keyboardNavigationController.isKeyboardEnabled() && keyboardNavigationController._focusedCellPosition.rowIndex === rowIndex) {
+          if (keyboardNavigationController.isKeyboardEnabled() && focusedRowIndex === rowIndex) {
             const $focusedCell = keyboardNavigationController._getFocusedCell();
             if (isElementDefined($focusedCell) && !$focusedCell.hasClass(COMMAND_EDIT_CLASS)) {
               $cell = $focusedCell;

diff --git a/testing/testcafe/tests/dataGrid/keyboardNavigation/startEditing.functional.ts b/testing/testcafe/tests/dataGrid/keyboardNavigation/startEditing.functional.ts
@@ -0,0 +1,37 @@
+import url from '../../../helpers/getPageUrl';
+import createWidget from '../../../helpers/createWidget';
+import DataGrid from '../../../model/dataGrid';
+
+fixture`Keyboard Navigation - editOnKeyPress`
+  .page(url(__dirname, '../../container.html'));
+
+const DATA_GRID_SELECTOR = '#container';
+
+test('Editing should start by pressing enter after scrolling content with scrolling.mode=virtual', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await dataGrid.scrollBy({ y: 10000 });
+
+  await t.click(dataGrid.getDataCell(49, 1).element);
+  await t.pressKey('enter');
+
+  await t.expect(dataGrid.getDataCell(49, 1).getEditor().element.focused).ok();
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [...new Array(50)].map((_, i) => ({
+      data1: i * 2,
+      data2: i * 2 + 1,
+    })),
+    columns: [
+      'data1',
+      'data2',
+    ],
+    editing: {
+      allowUpdating: true,
+    },
+    scrolling: {
+      mode: 'virtual',
+    },
+    height: 300,
+  });
+});