DataGrid - Focus gets removed from rowsview when datagrid repaints on…

… focusChanged event - T1224663 (#28714)
DevExpress · Jan 16, 2025 · 7625adf · 7625adf
1 parent 5150fd0
commit 7625adf
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/focus/focus.ts b/e2e/testcafe-devextreme/tests/dataGrid/focus/focus.ts
@@ -240,3 +240,30 @@ test('DataGrid - FilterRow cell loses focus when focusedRowEnabled is true and e
     });
   });
 });
+
+['onFocusedRowChanged', 'onFocusedRowChanging'].forEach((event) => {
+  test(`Focus should be preserved on datagrid when rowsview repaints in ${event} event (T1224663)`, async (t) => {
+    const dataGrid = new DataGrid('#container');
+
+    await t
+      .click(dataGrid.getDataCell(0, 0).element)
+      .expect(dataGrid.getDataRow(0).isFocusedRow)
+      .ok();
+
+    await t
+      .pressKey('down')
+      .expect(dataGrid.getDataRow(1).isFocusedRow)
+      .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,
+    [event]: (e) => {
+      e.component.repaint();
+    },
+  }));
+});
diff --git a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/const.ts b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/const.ts
@@ -4,6 +4,7 @@ export const ATTRIBUTES = {
 };
 
 export const ROWS_VIEW_CLASS = 'rowsview';
+export const TABLE_CLASS = 'table';
 export const EDIT_FORM_CLASS = 'edit-form';
 export const GROUP_FOOTER_CLASS = 'group-footer';
 export const ROW_CLASS = 'dx-row';

diff --git a/...ges/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/...ges/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
@@ -24,6 +24,7 @@ import {
 import { isDeferred, isDefined, isEmptyObject } from '@js/core/utils/type';
 import * as accessibility from '@js/ui/shared/accessibility';
 import { focused } from '@js/ui/widget/selectors';
+import { isElementInDom } from '@ts/core/utils/m_dom';
 import type { AdaptiveColumnsController } from '@ts/grids/grid_core/adaptivity/m_adaptivity';
 import type { DataController } from '@ts/grids/grid_core/data_controller/m_data_controller';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
@@ -71,6 +72,7 @@ import {
   REVERT_BUTTON_CLASS,
   ROWS_VIEW,
   ROWS_VIEW_CLASS,
+  TABLE_CLASS,
   WIDGET_CLASS,
 } from './const';
 import { GridCoreKeyboardNavigationDom } from './dom';
@@ -331,18 +333,32 @@ export class KeyboardNavigationController extends modules.ViewController {
 
     this._documentClickHandler = this._documentClickHandler || this.createAction((e) => {
       const $target = $(e.event.target);
-      const isCurrentRowsViewClick = this._isEventInCurrentGrid(e.event)
-        && $target.closest(`.${this.addWidgetPrefix(ROWS_VIEW_CLASS)}`).length;
-      const isEditorOverlay = $target.closest(
-        `.${DROPDOWN_EDITOR_OVERLAY_CLASS}`,
-      ).length;
-      const isColumnResizing = !!this._columnResizerController && this._columnResizerController.isResizing();
-      if (!isCurrentRowsViewClick && !isEditorOverlay && !isColumnResizing) {
-        const targetInsideFocusedView = this._focusedView
-          ? $target.parents().filter(this._focusedView.element()).length > 0
-          : false;
-
-        !targetInsideFocusedView && this._resetFocusedCell(true);
+
+      const tableSelector = `.${this.addWidgetPrefix(TABLE_CLASS)}`;
+      const rowsViewSelector = `.${this.addWidgetPrefix(ROWS_VIEW_CLASS)}`;
+      const editorOverlaySelector = `.${DROPDOWN_EDITOR_OVERLAY_CLASS}`;
+
+      // if click was on the datagrid table, but the target element is no more presented in the DOM
+      const needKeepFocus = !!$target.closest(tableSelector).length && !isElementInDom($target);
+
+      if (needKeepFocus) {
+        e.event.preventDefault();
+        return;
+      }
+
+      const isRowsViewClick = this._isEventInCurrentGrid(e.event) && !!$target.closest(rowsViewSelector).length;
+      const isEditorOverlayClick = !!$target.closest(editorOverlaySelector).length;
+      const isColumnResizing = !!this._columnResizerController?.isResizing();
+
+      if (!isRowsViewClick && !isEditorOverlayClick && !isColumnResizing) {
+        const isClickOutsideFocusedView = this._focusedView
+          ? $target.closest(this._focusedView.element()).length === 0
+          : true;
+
+        if (isClickOutsideFocusedView) {
+          this._resetFocusedCell(true);
+        }
+
         this._resetFocusedView();
       }
     });