TreeList - Tab navigation breaks on a custom action button when FocusedRowEnabled is set (T1218572)

e2e/testcafe-devextreme/tests/treeList/keyboardNavigation/keyboardNavigation.functional.ts

@@ -102,3 +102,41 @@ test('TreeList - Template button in a data row isn\'t navigable with Tab button
  },
  }, '#otherContainer');
 });
+
+const tasks_T1218572 = [{
+ Task_ID: 1,
+ Task_Subject: 'Plans 2015',
+ Task_Parent_ID: 0,
+}, {
+ Task_ID: 2,
+ Task_Subject: 'Health Insurance',
+ Task_Parent_ID: 0,
+}];
+
+test.only('TreeList - Tab navigation breaks on a custom action button when FocusedRowEnabled is set (T1218572)', async (t) => {
+ const treeList = new TreeList('#container');
+ await t
+ .click(treeList.getHeaders().getHeaderRow(0).getHeaderCell(0).element)
+ .pressKey('tab tab')
+
+ .expect(treeList.getDataCell(1, 0).isFocused)
+ .ok();
+}).before(async () => createWidget('dxTreeList', {
+ dataSource: tasks_T1218572,
+ keyExpr: 'Task_ID',
+ parentIdExpr: 'Task_Parent_ID',
+ focusedRowEnabled: true,
+ focusedRowKey: 2,
+ showBorders: true,
+ columns: [
+ 'Task_ID',
+ {
+ caption: "Actions",
+ type: "buttons",
+ buttons: [{
+ name: "download",
+ icon: "download",
+ }]
+ }
+ ],
+}));

packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.ts

@@ -399,12 +399,16 @@ export class FocusController extends core.ViewController {
 
  $prevRowFocusedElement
  .removeClass(ROW_FOCUSED_CLASS)
- .removeClass(CELL_FOCUS_DISABLED_CLASS)
- .removeAttr('tabindex');
+ .removeClass(CELL_FOCUS_DISABLED_CLASS);
+
+ if ($prevRowFocusedElement.attr('aria-rowindex') !== '1') {
+ $prevRowFocusedElement.removeAttr('tabindex');
+ }
+
  $prevRowFocusedElement.children('td').removeAttr('tabindex');
  if (focusedRowIndex !== 0) {
  const $firstRow = $(this.getView('rowsView').getRowElement(0));
- $firstRow.removeClass(CELL_FOCUS_DISABLED_CLASS).removeAttr('tabIndex');
+ $firstRow.removeClass(CELL_FOCUS_DISABLED_CLASS);
  }
  }
 
@@ -864,6 +868,9 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFocusController e
 
  $row.attr('tabIndex', tabIndex);
 
+ const $firstRow = $(this.getView('rowsView').getRowElement(0));
+ $firstRow.attr('tabIndex', tabIndex);
+
  if (rowIndex >= 0 && !preventScroll) {
  if (columnIndex < 0) {
  columnIndex = 0;

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

@@ -1310,7 +1310,7 @@ export class KeyboardNavigationController extends modules.ViewController {
  const isHighlighted = this._isCellElement($(element));
 
  if (!element) {
- activeElementSelector = '.dx-datagrid-rowsview .dx-row[tabindex]';
+ activeElementSelector = '.dx-datagrid-rowsview .dx-row-focused';
  if (!focusedRowEnabled) {
  activeElementSelector
  += ', .dx-datagrid-rowsview .dx-row > td[tabindex]';

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/focus.integration.tests.js

@@ -1138,7 +1138,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
  const focusedRowElement = dataGrid.getView('rowsView').getRow(1);
  assert.ok(focusedRowElement.hasClass('dx-row-focused'), 'Focused row is row 1');
  assert.equal(focusedRowElement.attr('tabindex'), 0, 'Focused row has tabindex');
- assert.ok(focusedRowElement.is(':focus'), 'Focused row has focus');
+ assert.ok(focusedRowElement.get(0) === document.activeElement, 'Focused row has focus');
  });
 
  QUnit.testInActiveWindow('DataGrid - Should change focusedRowKey at runtime', function(assert) {