DataGrid(T1171870): DataGrid - The 'dx-focused' class is not removed …

…from a grid cell when it loses focus. (#24951)

Co-authored-by: Ilya Vinogradov <ilya.vinogradov@devexpress.com>

js/__internal/grids/grid_core/keyboard_navigation/const.ts

@@ -26,6 +26,7 @@ export const DATEBOX_WIDGET_NAME = 'dxDateBox';
 export const FOCUS_STATE_CLASS = 'dx-state-focused';
 export const WIDGET_CLASS = 'dx-widget';
 export const REVERT_BUTTON_CLASS = 'dx-revert-button';
+export const FOCUSED_CLASS = 'dx-focused';
 
 export const FAST_EDITING_DELETE_KEY = 'delete';
 

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

@@ -53,6 +53,7 @@ import {
   FOCUS_STATE_CLASS,
   FOCUS_TYPE_CELL,
   FOCUS_TYPE_ROW,
+  FOCUSED_CLASS,
   FREESPACE_ROW_CLASS,
   FUNCTIONAL_KEYS,
   GROUP_FOOTER_CLASS,
@@ -1306,13 +1307,16 @@ export class KeyboardNavigationController extends modules.ViewController {
           .find('.dx-row[tabindex], .dx-row > td[tabindex]')
           .not($focusElement)
           .removeClass(CELL_FOCUS_DISABLED_CLASS)
+          .removeClass(FOCUSED_CLASS)
           .removeAttr('tabindex');
       }
 
       // @ts-expect-error
       eventsEngine.one($focusElement, 'blur', (e) => {
         if (e.relatedTarget) {
-          $focusElement.removeClass(CELL_FOCUS_DISABLED_CLASS);
+          $focusElement
+            .removeClass(CELL_FOCUS_DISABLED_CLASS)
+            .removeClass(FOCUSED_CLASS);
         }
       });
       if (!skipFocusEvent) {

testing/testcafe/tests/dataGrid/focus/focus.ts

@@ -0,0 +1,35 @@
+import createWidget from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import DataGrid from '../../../model/dataGrid';
+
+fixture.disablePageReloads`Focus`
+  .page(url(__dirname, '../../container.html'));
+
+const GRID_SELECTOR = '#container';
+const FOCUSED_CLASS = 'dx-focused';
+
+test('Should remove dx-focused class on blur event from the cell', async (t) => {
+  const dataGrid = new DataGrid(GRID_SELECTOR);
+
+  const firstCell = dataGrid.getDataCell(0, 1);
+  const secondCell = dataGrid.getDataCell(1, 1);
+
+  await t
+    .click(firstCell.element)
+    .click(secondCell.element);
+
+  await t.expect(firstCell.element().hasClass(FOCUSED_CLASS)).notOk();
+  await t.expect(secondCell.element().hasClass(FOCUSED_CLASS)).ok();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { A: 0, B: 1, C: 2 },
+    { A: 3, B: 4, C: 5 },
+    { A: 6, B: 7, C: 8 },
+  ],
+  editing: {
+    mode: 'batch',
+    allowUpdating: true,
+    startEditAction: 'dblClick',
+  },
+  onCellClick: (event) => event.component.focus(event.cellElement),
+}));

testing/testcafe/tests/dataGrid/focusEvents/T1162227_newRows.ts → testing/testcafe/tests/dataGrid/focus/focusEvents/newRows_T1162227.ts

@@ -1,13 +1,13 @@
-import createWidget from '../../../helpers/createWidget';
-import url from '../../../helpers/getPageUrl';
-import DataGrid from '../../../model/dataGrid';
-import { CallbackTestHelper, WindowCallbackExtended } from '../../../helpers/callbackTestHelper';
+import createWidget from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import DataGrid from '../../../../model/dataGrid';
+import { CallbackTestHelper, WindowCallbackExtended } from '../../../../helpers/callbackTestHelper';
 
 // TODO: Something wrong with test cleanup with 'disablePageReloads'
 //       old events from previous test still alive on the next test case run
 //       So, we should disable it for these tests until this problem exists.
 fixture`Focused row - new rows T1162227`
-  .page(url(__dirname, '../../container.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 type FocusCellChangingData =
   [[prevRowIdx: number, prevColumnIdx: number], [rowIdx: number, columnIdx: number]];

testing/testcafe/tests/dataGrid/focusedRow.ts → testing/testcafe/tests/dataGrid/focus/focusedRow/focusedRow.ts

@@ -1,10 +1,10 @@
 import { ClientFunction } from 'testcafe';
-import url from '../../helpers/getPageUrl';
-import createWidget from '../../helpers/createWidget';
-import DataGrid from '../../model/dataGrid';
+import url from '../../../../helpers/getPageUrl';
+import createWidget from '../../../../helpers/createWidget';
+import DataGrid from '../../../../model/dataGrid';
 
 fixture.disablePageReloads`Focused row`
-  .page(url(__dirname, '../container.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 test('onFocusedRowChanged event should fire once after changing focusedRowKey if paging.enabled = false (T755722)', async (t) => {
   const dataGrid = new DataGrid('#container');

testing/testcafe/tests/dataGrid/focusedRow/markup.ts → testing/testcafe/tests/dataGrid/focus/focusedRow/markup.ts

@@ -1,12 +1,12 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
-import { changeTheme } from '../../../helpers/changeTheme';
-import createWidget from '../../../helpers/createWidget';
-import url from '../../../helpers/getPageUrl';
-import DataGrid from '../../../model/dataGrid';
-import { Themes } from '../helpers/themes';
+import { changeTheme } from '../../../../helpers/changeTheme';
+import createWidget from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import DataGrid from '../../../../model/dataGrid';
+import { Themes } from '../../helpers/themes';
 
 fixture.disablePageReloads`Focused row - markup`
-  .page(url(__dirname, '../../container.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 // TODO: Enable multi-theming testcafe run in the future.
 [