DataGrid - Fix the issue with the focus method not setting the focus to the grid (T1308919)

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

@@ -6576,3 +6576,57 @@ test('The last cell should be focused after changing the page size (T1063530)',
     })();
   });
 });
+
+test('Focus should be set to the grid to allow keyboard navigation when the focus method is called (T1308919)', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const firstDataCell = dataGrid.getDataCell(0, 0);
+  const firstRow = dataGrid.getDataRow(0);
+  const secondRow = dataGrid.getDataRow(1);
+  const focusButton = ClientFunction(() => {
+    $('#otherContainer button')[0]?.focus();
+  });
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await dataGrid.apiFocus(firstDataCell.element);
+
+  // assert
+  await t.expect(firstDataCell.isFocused).ok();
+  await t.expect(firstRow.isFocusedRow).ok();
+
+  // act
+  await focusButton();
+
+  // assert
+  await t.expect(firstDataCell.isFocused).notOk();
+  await t.expect(firstRow.isFocusedRow).ok();
+
+  // act
+  await t.pressKey('down');
+
+  // assert
+  await t.expect(secondRow.isFocusedRow).notOk(); // focus is still on the button
+
+  // act
+  await dataGrid.apiFocus();
+  await t.pressKey('down');
+
+  // assert
+  await t.expect(secondRow.isFocusedRow).ok();
+}).before(async () => {
+  await ClientFunction(() => {
+    $('<button>').appendTo('#otherContainer');
+  })();
+  await createWidget('dxDataGrid', {
+    dataSource: [{ id: 1, name: 'test1' }, { id: 2, name: 'test2' }],
+    keyExpr: 'id',
+    focusedRowEnabled: true,
+  });
+}).after(async () => {
+  await ClientFunction(() => {
+    $('#otherContainer button').remove();
+  })();
+});

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

@@ -1674,6 +1674,12 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
           $focusElement
             .removeClass(CELL_FOCUS_DISABLED_CLASS)
             .removeClass(FOCUSED_CLASS);
+
+          const isTargetInGrid = gridCoreUtils.isElementInCurrentGrid(this, $(e.relatedTarget));
+          if (!isTargetInGrid) {
+            this._resetFocusedCell(true);
+            this._resetFocusedView();
+          }
         }
       });
       if (!skipFocusEvent) {

packages/testcafe-models/dataGrid/index.ts

@@ -742,16 +742,12 @@ export default class DataGrid extends GridCore {
     )();
   }
 
-  apiFocus(): Promise<void> {
+  apiFocus(cellElement?: Selector): Promise<void> {
     const { getInstance } = this;
 
     return ClientFunction(
-      () => (getInstance() as any).focus(),
-      {
-        dependencies: {
-          getInstance,
-        },
-      },
+      () => (getInstance() as any).focus(cellElement?.()),
+      { dependencies: { getInstance, cellElement } },
     )();
   }