DataGrid - Hovering does not highlight rows properly (T1240074) (DevE…

…xpress#27751)

e2e/testcafe-devextreme/tests/dataGrid/markup/T1240074_hoveringRows.ts

@@ -0,0 +1,56 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import { getData } from '../helpers/generateDataSourceData';
+
+fixture.disablePageReloads`HoveringRows`.page(
+  url(__dirname, '../../container.html'),
+);
+
+test('Hover over rows in the middle', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const firstRow = dataGrid.getDataRow(10);
+  const secondRow = dataGrid.getDataRow(11);
+
+  await t.hover(firstRow.element)
+    .expect(firstRow.isHovered)
+    .ok();
+
+  await t.hover(secondRow.element)
+    .expect(firstRow.isHovered)
+    .notOk()
+    .expect(secondRow.isHovered)
+    .ok();
+}).before(async () => {
+  await createWidget(
+    'dxDataGrid',
+    {
+      dataSource: getData(20, 3),
+      hoverStateEnabled: true,
+    },
+  );
+});
+
+test('Hover over first and last rows', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const firstRow = dataGrid.getDataRow(0);
+  const lastRow = dataGrid.getDataRow(19);
+
+  await t.hover(firstRow.element)
+    .expect(firstRow.isHovered)
+    .ok();
+
+  await t.hover(lastRow.element)
+    .expect(firstRow.isHovered)
+    .notOk()
+    .expect(lastRow.isHovered)
+    .ok();
+}).before(async () => {
+  await createWidget(
+    'dxDataGrid',
+    {
+      dataSource: getData(20, 3),
+      hoverStateEnabled: true,
+    },
+  );
+});

packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts

@@ -117,10 +117,9 @@ class DataGrid extends GridCoreWidget<Properties> {
     ]);
   }
 
-  private _init() {
+  protected _init() {
     const that = this;
 
-    // @ts-expect-error
     super._init();
 
     gridCoreUtils.logHeaderFilterDeprecatedWarningIfNeed(that);

packages/devextreme/js/__internal/grids/grid_core/m_widget_base.ts

@@ -7,7 +7,7 @@ import Widget from '@js/ui/widget/ui.widget';
 const GRID_CORE_ROW_SELECTOR = '.dx-row';
 
 export default class GridCoreWidget<TProperties> extends Widget<TProperties> {
-  private readonly _activeStateUnit = GRID_CORE_ROW_SELECTOR;
+  private _activeStateUnit;
 
   private readonly _controllers: any;
 
@@ -26,6 +26,12 @@ export default class GridCoreWidget<TProperties> extends Widget<TProperties> {
     return result;
   }
 
+  protected _init() {
+    this._activeStateUnit = GRID_CORE_ROW_SELECTOR;
+    // @ts-expect-error
+    super._init();
+  }
+
   protected _setDeprecatedOptions() {
     // @ts-expect-error
     super._setDeprecatedOptions();

packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts

@@ -89,7 +89,6 @@ class TreeList extends GridCoreWidget<dxTreeListOptions> {
   protected _init() {
     const that = this;
 
-    // @ts-expect-error
     super._init();
 
     if (!this.option('_disableDeprecationWarnings')) {