DataGrid: Fix the focus() method that focuses the interactive element inside a cell instead of the row when focusedRowEnabled is true (T1293309) (#30947)

Alyar666 · web-flow · commit 89d358793885 · 2025-08-30T00:33:48.000+03:00
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts
@@ -317,3 +317,58 @@ test('DataGrid - Focused cell appearance is applied to non-editable CheckBox cel
     'BoolTwo',
   ],
 }));
+
+// T1293309
+test('Focus method should focus the first data cell', async (t) => {
+  const dataGrid = new DataGrid(GRID_SELECTOR);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.apiFocus();
+
+  await t
+    .expect(dataGrid.getDataCell(0, 0).element.focused)
+    .ok();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { id: 1, name: 'name 1' },
+    { id: 2, name: 'name 2' },
+    { id: 3, name: 'name 3' },
+  ],
+  keyExpr: 'id',
+  columns: [
+    'id',
+    {
+      dataField: 'name',
+      cellTemplate: (_, options) => $('<div>').attr('tabindex', 0).text(options.text),
+    },
+  ],
+}));
+
+// T1293309
+test('Focus method should focus the first data row when focusedRowEnabled = true', async (t) => {
+  const dataGrid = new DataGrid(GRID_SELECTOR);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.apiFocus();
+
+  await t
+    .expect(dataGrid.getDataRow(0).element.focused)
+    .ok();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { id: 1, name: 'name 1' },
+    { id: 2, name: 'name 2' },
+    { id: 3, name: 'name 3' },
+  ],
+  keyExpr: 'id',
+  focusedRowEnabled: true,
+  columns: [
+    'id',
+    {
+      dataField: 'name',
+      cellTemplate: (_, options) => $('<div>').attr('tabindex', 0).text(options.text),
+    },
+  ],
+}));
diff --git a/e2e/testcafe-devextreme/tests/treeList/focus.ts b/e2e/testcafe-devextreme/tests/treeList/focus.ts
@@ -0,0 +1,65 @@
+import TreeList from 'devextreme-testcafe-models/treeList';
+import { createWidget } from '../../helpers/createWidget';
+import url from '../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Focus`
+  .page(url(__dirname, '../container.html'));
+
+const TREE_LIST_SELECTOR = '#container';
+
+// T1294363
+test('Focus method should focus the first data cell', async (t) => {
+  const treeList = new TreeList(TREE_LIST_SELECTOR);
+
+  await t.expect(treeList.isReady()).ok();
+
+  await treeList.apiFocus();
+
+  await t
+    .expect(treeList.getDataCell(0, 0).element.focused)
+    .ok();
+}).before(async () => createWidget('dxTreeList', {
+  dataSource: [
+    { id: 1, parentId: 0, name: 'name 1' },
+    { id: 2, parentId: 1, name: 'name 2' },
+    { id: 3, parentId: 0, name: 'name 3' },
+  ],
+  keyExpr: 'id',
+  parentId: 'parentId',
+  columns: [
+    'id',
+    {
+      dataField: 'name',
+      cellTemplate: (_, options) => $('<div>').attr('tabindex', 0).text(options.text),
+    },
+  ],
+}));
+
+// T1294363
+test('Focus method should focus the first data row when focusedRowEnabled = true', async (t) => {
+  const treeList = new TreeList(TREE_LIST_SELECTOR);
+
+  await t.expect(treeList.isReady()).ok();
+
+  await treeList.apiFocus();
+
+  await t
+    .expect(treeList.getDataRow(0).element.focused)
+    .ok();
+}).before(async () => createWidget('dxTreeList', {
+  dataSource: [
+    { id: 1, parentId: 0, name: 'name 1' },
+    { id: 2, parentId: 1, name: 'name 2' },
+    { id: 3, parentId: 0, name: 'name 3' },
+  ],
+  keyExpr: 'id',
+  parentId: 'parentId',
+  focusedRowEnabled: true,
+  columns: [
+    'id',
+    {
+      dataField: 'name',
+      cellTemplate: (_, options) => $('<div>').attr('tabindex', 0).text(options.text),
+    },
+  ],
+}));
diff --git a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
@@ -82,6 +82,7 @@ import {
   isDetailRow,
   isEditForm,
   isEditorCell,
+  isEditRow,
   isElementDefined,
   isFixedColumnIndexOffsetRequired,
   isGroupFooterRow,
@@ -1430,10 +1431,10 @@ export class KeyboardNavigationController extends modules.ViewController {
     const isHighlighted = this._isCellElement($(element));
 
     if (!element) {
-      activeElementSelector = '.dx-datagrid-rowsview .dx-row[tabindex]';
+      activeElementSelector = `.${this.addWidgetPrefix(ROWS_VIEW_CLASS)} .dx-row[tabindex]`;
       if (!focusedRowEnabled) {
         activeElementSelector
-          += ', .dx-datagrid-rowsview .dx-row > td[tabindex]';
+          += `, .${this.addWidgetPrefix(ROWS_VIEW_CLASS)} .dx-row > td[tabindex]`;
       }
       element = this.component.$element().find(activeElementSelector).first();
     }
@@ -1477,14 +1478,18 @@ export class KeyboardNavigationController extends modules.ViewController {
         isHighlighted,
       );
       $element = args.$newCellElement;
+
       if (isRowFocusType && !args.isHighlighted) {
         this.setRowFocusType();
       }
     }
 
     if (!args.cancel) {
       this._focus($element, !args.isHighlighted);
-      this._focusInteractiveElement($element);
+
+      if (this._getElementType($element) !== 'row' || isEditRow($element)) {
+        this._focusInteractiveElement($element);
+      }
     }
   }
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation_utils.ts b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation_utils.ts
@@ -1,7 +1,7 @@
 import devices from '@js/core/devices';
 import { isDefined } from '@js/core/utils/type';
 
-import { EDITOR_CELL_CLASS } from '../editing/const';
+import { EDIT_ROW, EDITOR_CELL_CLASS } from '../editing/const';
 import {
   ADAPTIVE_ITEM_TEXT_CLASS,
   COMMAND_SELECT_CLASS, DATA_ROW_CLASS, EDIT_FORM_CLASS, FREESPACE_ROW_CLASS, GROUP_ROW_CLASS, HEADER_ROW_CLASS,
@@ -24,6 +24,10 @@ export function isAdaptiveItem($element) {
   return $element && $element.hasClass(ADAPTIVE_ITEM_TEXT_CLASS);
 }
 
+export function isEditRow($row) {
+  return $row?.hasClass(EDIT_ROW);
+}
+
 export function isEditForm($row) {
   return $row && $row.hasClass(MASTER_DETAIL_ROW_CLASS) && $row.hasClass(EDIT_FORM_CLASS);
 }
diff --git a/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts b/packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts
@@ -9,7 +9,6 @@ import './m_grid_view';
 import './module_not_extended/header_panel';
 
 import registerComponent from '@js/core/component_registrator';
-import { isDefined } from '@js/core/utils/type';
 import { isMaterialBased } from '@js/ui/themes';
 import type { Properties as dxTreeListOptions } from '@js/ui/tree_list';
 import gridCoreUtils from '@ts/grids/grid_core/m_utils';
@@ -105,11 +104,7 @@ class TreeList extends GridCoreWidget<dxTreeListOptions> {
   }
 
   public focus(element?) {
-    super.focus();
-
-    if (isDefined(element)) {
-      this.getController('keyboardNavigation').focus(element);
-    }
+    this.getController('keyboardNavigation').focus(element);
   }
 }
 
diff --git a/packages/testcafe-models/dataGrid/index.ts b/packages/testcafe-models/dataGrid/index.ts
@@ -727,6 +727,20 @@ export default class DataGrid extends Widget {
     )();
   }
 
+
+  apiFocus(): Promise<void> {
+    const { getInstance } = this;
+
+    return ClientFunction(
+      () => (getInstance() as any).focus(),
+      {
+        dependencies: {
+          getInstance,
+        },
+      },
+    )();
+  }
+
   moveRow(rowIndex: number, x: number, y: number, isStart = false): Promise<void> {
     const { getInstance } = this;
 

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,6 @@ import './m_grid_view';`
`9`	`9`	`import './module_not_extended/header_panel';`
`10`	`10`
`11`	`11`	`import registerComponent from '@js/core/component_registrator';`
`12`		`-import { isDefined } from '@js/core/utils/type';`
`13`	`12`	`import { isMaterialBased } from '@js/ui/themes';`
`14`	`13`	`import type { Properties as dxTreeListOptions } from '@js/ui/tree_list';`
`15`	`14`	`import gridCoreUtils from '@ts/grids/grid_core/m_utils';`
`@@ -105,11 +104,7 @@ class TreeList extends GridCoreWidget<dxTreeListOptions> {`
`105`	`104`	`}`
`106`	`105`
`107`	`106`	`public focus(element?) {`
`108`		`- super.focus();`
`109`		`-`
`110`		`- if (isDefined(element)) {`
`111`		`- this.getController('keyboardNavigation').focus(element);`
`112`		`- }`
	`107`	`+ this.getController('keyboardNavigation').focus(element);`
`113`	`108`	`}`
`114`	`109`	`}`
`115`	`110`